text 两端对齐 小程序_完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐

text-align:justify; 所有浏览器都支持，text-justify之类的却只有IE支持，就不要考虑了。

justify我的理解，使元素内部的子元素两端对齐，子元素当然只能是inline或inline-block。但justify对最后一行是无能为力的。我们在对齐姓名时，因为只有一行，当作最后一行，所以不会两端对齐的效果。

姓名对齐我们比较常用的是 (半个中文空格)， (一个中文空格)来添充两个字，三个字的姓名，使包括四字的姓名都能对齐。例如：

欧阳大咖

张 小 三

王  五

但我们发现大部分浏览器是正常的，但不幸的是我们发现手机浏览器打开大部分是不行的，效果就像下面那样对不齐。

欧阳大咖

张 小 三

王  五

所以就想到了用text-align:justify;但怎么解决单行不能两端对齐呢，思路就是：

让浏览器认为这不是最后一行就行了

在元素里面加一个会换行的空的子元素比如:

例子：html结构

作品名称： 宝贝儿 作品类型： 油画 艺术家： 张玉瀛 风格： 超现实 材质： 布面油画 题材： 人物 创作时间： 2011 所在位置： 华东 尺寸： 78x78cm

scss

li{font-size:14px;line-height:24px;color:#4a4a4a;span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;i{display:inline-block;width:100%;height:0;}}

}

效果

几点注意事项：

1)span要设置为inline-block;才能和后面的字同行显示，同时设置width才会使换行；

2)必须要设置span元素的height，和overflow:hidden否则还是会占高度；

3)vertical-align:top;可以使，li内的span和后面的字，高度对齐，否则会变成