在很多项目中,都会遇到这样的需求;
实现文本两端对齐,效果如下图:
那如何实现呢?
so, easy 直接使用 text-align: justify 属性即可.
但是,添加后,你会发现,没有效果.
那怎么办呢?
有两种方法实现
方法一:
代码语言:javascript复制.rui-justify{text-align: justify;}
.rui-justify::after{
content: '';
display: inline-block;
padding-left: 100%;
}
以上写法是比较麻烦的,不过兼容性比较好
方法二:
结合 text-align-last 属性,该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。
代码语言:javascript复制text-align: justify;
text-align-last: justify;
此方法更简单,但是有一定的兼容问题
所以,到底选择那一个方法,根据实际情况来定.