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

 先看下图:

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

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

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

我们可以看到,demo页面上有一段朴实的文字:

然后我们点击按钮变身一下,会发现,文字内容乖乖两端对齐了:

这种对齐效果,IE6/IE7浏览器也是支持良好的,例如,下面这个IE7下的截图:

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

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

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

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

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

结果就是:

会发现,每个中文文字之间都有的空格字符,于是,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一样 距离,以便于您获取更多的相关知识。

时间: 2024-09-15 19:27:02

中文英文左右padding一致两端对齐实现的相关文章

Word两端对齐问题

主要是有英文的话,选择两端对齐后字符间距变大,这时候可以选择段落-----中文版式----------允许西文在单词中间换行,这个在最左上角的word选项里也有.遇到好几次这样的,主要是在参考文献里.

text-align:justify实现两端对齐一例

text-align:justify只能对多行中的非最后一行进行两端对齐.对于单行自己没办法,IE有text-justify 可以解决问题,对了非IE的我的方式比较垃圾,因为只在特殊场合下才会用.  代码如下 复制代码 .justify{ height:1.1em; overflow:hidden; text-align:justify; text-justify :distribute-all-lines; } div.cn:after { content: "________________

Android实现TextView两端对齐的方法_Android

Android中的TextView控件默认是做不到两端对齐的,都是左对齐.可能的原因是安卓默认数字.字母不能为第一行以后每行的开头字符,因为数字.字母为半角字符,还有就是文字中的英文字符占用1个字节,而一个汉字占用两个字节.下面我就介绍下实现两端对齐的原理: 1.测量一个中文汉字所占用的宽度 2.根据TextView的宽度和一个汉字所占用的宽度以及字符之间的间隔计算出总行数. 3.根据padding和margin以及行高计算出TextView的总高度. 4.绘制每一行的每一个字符 效果如下: 具

Android实现TextView两端对齐的方法

Android中的TextView控件默认是做不到两端对齐的,都是左对齐.可能的原因是安卓默认数字.字母不能为第一行以后每行的开头字符,因为数字.字母为半角字符,还有就是文字中的英文字符占用1个字节,而一个汉字占用两个字节.下面我就介绍下实现两端对齐的原理: 1.测量一个中文汉字所占用的宽度 2.根据TextView的宽度和一个汉字所占用的宽度以及字符之间的间隔计算出总行数. 3.根据padding和margin以及行高计算出TextView的总高度. 4.绘制每一行的每一个字符 效果如下: 具

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

 今天分享一个小技巧,是中英文两端对齐,只是应对哪些变态的需求.一般情况下还是不推荐使用的,毕竟使用了几句js. 案例如下: 混合使用汉字和英文的段落默认如下:  两边是不对齐的(一般情况下,我们对这种情况不做处理,除非需求或者设计非要我们实现两端对齐). 对齐之后如下: 实现思路 一般的两端对齐是使用text-align:justify,但是text-align:justify一般情况下只针对英文管用.(因为css是老外设计的,老外在justify判断的时候,是根据单词直接的空格来的,中文两个

【原】css实现两端对齐的3种方法

说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面的文本或模块.   响应式网页设计出现以来,更多是使用百分比布自适应布局,特别是在移动端,两端对齐的方式显得越来越重要.那么,如何使用css实现两端对齐,相信很多同学会文本对齐的text-align:justify,这是今天要讲的其中一种方式,另外还有两种更精彩的实现方式,请往下看~ 下图是需要实现

css 文本两端对齐应用实例

在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就行了,text-justify的情况相对比较复杂 IE的取值如下: auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本.该行为是对齐所有文本行最快的方法.它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的

word两端对齐、分散对齐

一.两端对齐 所谓的两对对齐,指的就是左右两边都同时对齐的意思. 你的word文档中的文字,至少要有满满的两行或者更多,这样,才能发现两端对齐的效果. 一旦使用两端对齐,那么,段落中的各行的文字(满行的情况才能看出效果),左边的各行的文字,都在垂直方向上一致对齐,没有哪行的字符不对齐.同时,在右边,各行的文字,同样都在垂直方向上一至对齐. 这就是两端对齐的效果,左右两边,每行的文字都在垂直方向上,对齐一条线. word之所以默认就使用这种对齐方式,目的在于,让你的文档的各段各行的文字,在左右两边

css:文本两端对齐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html;