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

2022-07-22 14:31:28 浏览数 (1)

在很多项目中,都会遇到这样的需求;

实现文本两端对齐,效果如下图:

那如何实现呢?

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;

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

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

0 人点赞