1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

css段落文字(中英文混杂)实现两端对齐

作者:用户 来源:互联网 时间:2016-11-07 17:56:15

代码汉字空格两端空格两端text-align:justify

css段落文字(中英文混杂)实现两端对齐 - 摘要: 本文讲的是css段落文字(中英文混杂)实现两端对齐,  今天分享一个小技巧,是中英文两端对齐,只是应对哪些变态的需求。一般情况下还是不推荐使用的,毕竟使用了几句js。 案例如下: 混合使用汉字和英文的段落默认

 今天分享一个小技巧,是中英文两端对齐,只是应对哪些变态的需求。一般情况下还是不推荐使用的,毕竟使用了几句js。

案例如下:

混合使用汉字和英文的段落默认如下:

<a href=css段落文字(中英文混杂)实现两端对齐-css段落两端对齐">

 两边是不对齐的(一般情况下,我们对这种情况不做处理,除非需求或者设计非要我们实现两端对齐)。

对齐之后如下:

css段落文字(中英文混杂)实现两端对齐-ps段落两端对齐

实现思路

一般的两端对齐是使用text-align:justify,但是text-align:justify一般情况下只针对英文管用。(因为css是老外设计的,老外在justify判断的时候,是根据单词直接的空格来的,中文两个汉字之间没有空格,所以大部分情况下text-align:justify不管用,所以这个属性大部分形同虚设!)。

解决办法

步骤一 :就是在汉字之间添加空格,然后再去除空格来实现。

添加空格我们用js来实现,先split然后再join就可以了!

代码如下:

"某某某某haorooms博客".split("").join(" ");

步骤二:添加空格之后,字间隙变大,会很难看,然后我们在用css的letter-spacing属性,进行相应的缩进。

代码如下:

letter-spacing: -0.15em;

这样就达到了两端对齐的效果。

总结

按照上面的思路,总结起来,用jquery实现代码如下:

$("#haorooms").css({"text-align":"justify","letter-spacing":"-0.15em"});

$("#haorooms").html()=$("#haorooms").html().split("").join(" ");

注释

-0.15em这个值可以指定,根据你当前的便宜来设置,-0.15em值是经验所得!em是一个单位,具体可以看http://www.haorooms.com/post/css_unit_calc

当然,也可以用纯js来实现这个效果!代码如下:

var box=document.getElementById("haorooms");

box.style.textAlign = "justify";

box.style.letterSpacing = "-.15em";

box.innerHTML = box.innerHTML.split("").join(" ");



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索代码 , 汉字 , 空格 , 两端空格 , 两端 text-align:justify css段落两端对齐、ps段落两端对齐、html段落两端对齐、latex 段落两端对齐、段落两端对齐,以便于您获取更多的相关知识。

android-Android阅读器如何实现文字两端对齐

... } textView.setText(resultText); } //分开每个段落 public static ArrayList&lt;String&gt; paraBreak(String text, TextView textview) { ArrayList&lt;String&gt; paraList = new ArrayList&lt;String&gt;(); String[] paraArray = text.split("\\n+"); for(String...

网页设计中针对中文排版CSS心得

...少做,所以不涉及。先介绍如何设定字体、颜色、大小、段落空白等比较简单的应用,后面再介绍下比如首字下沉、首行缩进。最后讲一些常用的web页面中文排版,比如中文字的截断、固定宽度词内折行(word-wrap和word-break)等...

网页制作排版秘笈

...博客时点选“显示源代码”找到你要修改的文字、表格、段落、列表等标记,把它们的属性按照下面的说明修改一下就可以实现你要的效果。1:如何设定文字字体、颜色、大小使用fontfont-style设定斜体,比如font-style: italic;font-weigh...

初识bootstrap框架,以及sass (CSS预处理器)

...很多常用的样式与js代码,直接用bootstrap class类名就可以实现效果; .container 表示一个定宽居中的容器,在bootstrap中是响应式的; .container-fluid 表示一个充满屏幕的容器即(width:100%) bootstrap采用了一个全新的布局方式,栅栏...

css段落文字(中英文混杂)实现两端对齐

今天分享一个小技巧,是中英文两端对齐,只是应对哪些变态的需求。一般情况下还是不推荐使用的,毕竟使用了几句js。 案例如下:混合使用汉字和英文的段落默认如下:两边是不对齐的(一般情况下,我们对这种情况不做处...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备