第一文字时两端对齐

最近再做一行文字时,两端对齐,遇到了一些问题,总结一下实现方法!

方法1、text-align-last

1、 如果是中文,必须加空格,不然在有些浏览器上不会两端对齐(如魅族手机
2、css3新属性,但是兼容性很差!safai不支持

text-align-last支持效果

用法:一个块内的最后一行(包括仅有一行文字

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; }

  • 目前知道两种方法,第一种因为兼容性不好,只能放弃使用。
  • 如有大神知道其它实现方法,请在下方评论
  • 本人菜鸟,第一次写技术文章,请见谅
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容