css text-align:justify为什么不生效

PC端的问题

现在需要实现文本展示两端对齐的效果，PC端设置了 css 代码：

 // html
 <span>姓名</span>

// css
span{
    width: 100%;
    display: inline-block;
    text-align: justify
}

但是实际效果并未生效

原因

text-align:justify 不会处理被打断的行和最后一行！
如果你的文字只占了一行，同时它也是最后一行了，所以text-align设置为justify不会产生任何效果。

解决方式

使用text-align-last，并将其设置为justify，不过不幸的是，text-align-last不是所有浏览器支持，使用起来兼容性问题比较多。

比如：在safari浏览起里面给span元素使用此属性会出现span元素超大宽度的问题，宽度不限制的话可以达到33554430px

所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了。