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

中文英文左右padding一致两端对齐实现

作者:用户 来源:互联网 时间:2016-01-15 20:37:44

中文字符文字空格innerhtml 特殊字符英文两端空格左右对齐右侧空格两端英文空格text-align:justify文本两端对齐

中文英文左右padding一致两端对齐实现 - 摘要: 本文讲的是中文英文左右padding一致两端对齐实现,  先看下图: 就是一个定宽的容器,左右padding值20像素,结果输入一段文字后(有中文也有英文字符),会发现右侧根本就不对齐,有些地方距离右侧的空白

 先看下图:

中文英文左右padding一致两端对齐实现-<a href=css 文字左右两端对齐">

就是一个定宽的容器,左右padding值20像素,结果输入一段文字后(有中文也有英文字符),会发现右侧根本就不对齐,有些地方距离右侧的空白大小也不是20像素,感觉不和谐,设计师就希望排列能够好看一点,右边要对齐。

其实呢,要实现两端对齐很简单,使用text-align:justify, 之前有写过“display:inline-block/text-align:justify下列表的两端对齐布局”,也是属于text-align:justify的精彩应用;然后配合其他一些小技巧,就能实现任意中英文的两端对齐排列效果了。

您可以狠狠地点击这里:中文或英文两端对齐Demo

我们可以看到,demo页面上有一段朴实的文字:
中文英文左右padding一致两端对齐实现-uilabel 左右两端对齐

然后我们点击按钮变身一下,会发现,文字内容乖乖两端对齐了:
中文英文左右padding一致两端对齐实现-padding上下左右

这种对齐效果,IE6/IE7浏览器也是支持良好的,例如,下面这个IE7下的截图:
中文英文左右padding一致两端对齐实现-padding左右居中

实现原理
要理解原理,我们首先要搞清楚文本的两端对齐声明text-align:justify起作用的本质。首先,大家要知道,text-align:justify是专门为英文设计的,谁叫CSS是老外发明的呢,用来实现英文语句的两端对齐。注意这里的,是语句的对齐。大家应该都知道,英文语句是一个单词一个单词组合而成的,每个单词之前使用空格分隔。

text-align:justify之所以可以让英文段落两端对齐,那是因为每个英文单词之前那个透明看不见的空格被拉伸了。注意,是空格被拉伸了,对,只有空格。因此,当我们写下一段洋洋洒洒中文内容的时候,text-align:justify是没有任何作用的,跟没设置没任何区别。为什么呢?很简单,因为中文是一个一个汉字,汉字之间是没有空格的,自然也就不能拉伸,自然也就不能两端对齐。

怎么办呢?难道中文就不行了吗?

当然不是!既然正常的中文文字之间没有空格,我们自己加一点不就好了。例如下面代码:

"宁泽涛小鲜肉".split("").join(" ");

结果就是:
中文英文左右padding一致两端对齐实现-左右padding一样 距离

会发现,每个中文文字之间都有的空格字符,于是,text-align:justify就能大发神威,实现两端对齐!

OK,现在两端对齐是实现了,但是,空格字符它也是真实存在的字符,是会占据宽度的。如果放任不管,文字就会太稀松,阅读很吃力,会被当bug提出来的,怎么办呢?

很简单,我们使用letter-spacing收缩字符间距就可以了。例如demo页面:

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

不同字体的letter-spacing负值不一样,使用em单位呢,可以更智能适配各个font-size的文字。demo使用的微软雅黑字体,我大致测试了下,-.15em是个挺合适的值,其他字体我就不详了,你有兴趣,可以自己捣腾下。

至此,我们的任意中文英文的两端对齐效果就实现了。

使用JS再总结下就是(假设box是文字容器元素):

ox.style.textAlign = "justify";
box.style.letterSpacing = "-.15em";
box.innerHTML = box.innerHTML.split("").join(" ");

寥寥3行代码,我们就大功告成了!

补充于翌日:
上面的方法适用于中文内容,如果段落含有英文片段,会干掉原来的空格,因为三个空格会被当做一个空格距离处理,因此,我们还需要对连续3个空格左下特殊处理,因此代码进化成:

box.innerHTML = box.innerHTML.replace(/^[\s\uFEFF\xA0]+[\s\uFEFF\xA0]+$/g, "").split("").join(" ").replace(/\s{3}/g, "   ");


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索中文 , 字符 , 文字 , 空格 , innerhtml 特殊字符 , 英文 , 两端空格 , 左右对齐 , 右侧空格 , 两端 , 英文空格 , text-align:justify 文本两端对齐 css 文字左右两端对齐、uilabel 左右两端对齐、padding上下左右、padding左右居中、左右padding一样 距离,以便于您获取更多的相关知识。

有什么办法能让英文网页的文字左右都对齐?现在的情况是要么只能左对齐,要么只能右对齐,求大神帮忙

问题描述 有什么办法能让英文网页的文字左右都对齐?现在的情况是要么只能左对齐,要么只能右对齐,求大神帮忙 解决方案 http://blog.163.com/lgh_2002/blog/static/4401...

xflash基础语法_Flash As

...说明。 font:字体类型,目前flash只支持英文字体,对于中文字体无效 size:字体大小,以像素为单位 color:字体颜色 bold:值为1时是粗体 html:是否为html格式 align:水平对齐方式,有center和right两个值 padding:水平方向两端边距 p...

网页制作排版秘笈

...这是通用的写法)2:如何控制段落排版使用margin,text-align中文段落使用 标签,左右(相当于缩进)、段前段后的空白,都可以用margin。比如:p{margin: 18px 6px 6px 18px;}文字的对齐方式用text-align,比如:p{text-align: center;}对齐方式还...

一个AJAX登陆界面

...首先来说,只需要用一个两行两列的表格把它们框起来,左右对齐上的问题就彻底解决了。根本不必要考虑到不同浏览器对padding和margin的判断不一样导致的我在Chome下浏览起来相当正常的网页一般到IE下就乱透了的前车之鉴。 但...

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

...老外在justify判断的时候,是根据单词直接的空格来的,中文两个汉字之间没有空格,所以大部分情况下text-align:justify不管用,所以这个属性大部分形同虚设。)。 解决办法步骤一 :就是在汉字之间添加空格,然后再去除空格来...

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

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

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

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