最近再做一行文字时,两端对齐,遇到了一些问题,总结一下实现方法!
方法1、text-align-last
1、 如果是中文,必须加空格,不然在有些浏览器上不会两端对齐(如魅族手机)
2、css3新属性,但是兼容性很差!safai不支持
用法:一个块内的最后一行(包括仅有一行文字)
auto:无特殊对齐方式。
left:内容左对齐。
center:内容居中对齐。
right:内容右对齐。
justify:内容两端对齐。
start:内容对齐开始边界。
end:内容对齐结束边界。
方法2、伪类
1、 如果是中文,必须加空格,不然在有些浏览器上不会两端对齐(如魅族手机)
2、white-space 不能为 nowrap
用法: 在当前元素添加after伪类,给其设置display:inilne-block等(详情见下方代码)
html -> <span>两 端 对 齐</span> css -> span { display: inline-block; width: 200px; text-align: justify; } span:after { display: inline-block; width: 100%; height: 0; content: ''; overflow: hidden; }
- 目前知道两种方法,第一种因为兼容性不好,只能放弃使用。
- 如有大神知道其它实现方法,请在下方评论
- 本人菜鸟,第一次写技术文章,请见谅