情景

很多时候设计师给我们的稿子如左图所示,表单中的字段描述文字呈两端对齐状态。而大多时候还原设计稿的时候,会偷懒把字段描述整成左对齐,如右图所示。这样做的原因是因为省时省力,而且表单的排版还算整齐。但有在某些非常需要排版美观的界面,如注册登陆页,设计师就一定要文字两端最齐,这就是这篇文章出现的缘故了,探索中文,中文混合文字两端对齐的方法。

设计稿 还原设计稿

空格法

相信大多数开发者最常用的空格就是 这个字符实体了,它等于按下space键产生的空格,但是这个空格受字体的影响强烈,所以不适合用来辅助排版。所幸我们还有另外两个字符实体  ,第一个所占的宽度等于半个中文字符的宽度,第二个所占的宽度等于一个中文字符宽度,这两个字符实体用来解决上面所描述的情景就可以的了。但是这两个字符实体只能解决全是中文字符的情形,遇到中英文字符混合的情形就没辙了。

    
    Check out this Pen! 

而且这种办法只适合小规模的表单,如果是大规模的表单,这样的手动插入字符实体也挺不易的。有些表单的描述甚至是从后端读取的变量,要手动插入字符实体的机会都没有。接下来介绍的CSS大就可以解决这两个问题。

纯CSS法

    
    Check out this Pen! 

先看看效果,这个方法有一点不完美的地方就是要在每个中文字符之间插入空格而且要固定容器的宽度,因为大部分浏览器两端对齐的实现,都是通过调整字之间的空格大小来达成,而英文单词本来就是以空格为间隔的,所以就不用做处理。因为这样的空格比较有规律可寻,相信如果是从后端读取变量的话,是有办法批量处理的。

处理两端对齐的CSS属性是text-align: justify,但是这个属性是不处理段落中的最后一行的,像上面表单字段的描述中,就相当于一段只有一行的段落,也既是最后一行,如果只是添加这个属性,是不会起效果的。所以,我们要让它变成不是最后一行,思路就是利用伪元素添加多一行作为最后一行,再让这一行变得不可见就好。

.text-justify {
    text-align: justify;
}

.text-justify:after {
    content: '';
    overflow: hidden;
    width: 100%; /*百分百的宽度,独占一行*/
    height: 0;
}

其实是有一个属性text-align-last: justify用来处理最后一行对齐的,但是因为这是CSS3中的一个实验性属性,有些浏览器要加前缀使用,有些就根本不支持,所以上面那种实现方式是兼容性比较好的。

去看看哪些浏览器支持text-align-last属性

对于不支持伪元素的旧IE(ie6 ~ ie8),可以通过IE浏览器特有的属性text-justify: distribute-all-lines;来让字符实现两端对齐。想了解更多text-justify的属性值,请看这篇文章

参考链接

event.target 和 event.currentTarget 的区别

js中event.target 和 event.currentTarget 的区别 Continue reading

sass 中 @include 与 @extend 的区别

Published on January 19, 2015

gulp 与 maven

Published on January 07, 2015