CSS之文本两端对齐的实现方法

在很多项目中，都会遇到这样的需求；

实现文本两端对齐，效果如下图：

那如何实现呢？

so, easy 直接使用 text-align: justify 属性即可.

但是，添加后，你会发现，没有效果.

那怎么办呢？

有两种方法实现

方法一：

.rui-justify{text-align: justify;}
.rui-justify::after{
content: '';
display: inline-block; 
padding-left: 100%;
}

以上写法是比较麻烦的，不过兼容性比较好

方法二：

结合 text-align-last 属性，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

text-align: justify;
text-align-last: justify;

此方法更简单，但是有一定的兼容问题

所以，到底选择那一个方法，根据实际情况来定.