关于text-align中的justify两端对齐

在很多的业务场景中，我们可能需要达到这样的一个效果

 

 

 

也就是将左边的label设定成相同的宽度，并且label内部的文字需要两端对齐，这里需要使用到text-align中的justify。

语法

使用起来很简单，只要在需要文本两端对齐的标签上加上text-align:justify

 

 

 

左边是设定text-align:left，右边是设定了text-align:justify,可以看出，justify实际上是将每个单词的间距进行拉伸，以达到两端对齐的效果。

存在问题

 

 

 当标签中文本只有一行时，justify并没有生效。
实际上，justify会自动忽略文本的最后一行。justify的主要还是应用于大段文本的处理，类似于这种情况：

 

 

 

在这种情形下，显然让最后一行文字两端对齐是不合适的。

解决方法

既然justify是针对最后一行文本无效的，那我们可以借助伪元素将文本的整体行数变为多行,代码如下

呈现的效果如下

 

（如果要将after带来的高度消除掉，可以给box设置一个固定高度）

要点：
1、需要使用after，将伪元素放在需要两端对齐的元素后面，作为第二行；
2、设定after的width为100%，生成第二行；
3、设置为行内块元素，设置的width才有效。

 

转： https://blog.csdn.net/weixin_43801564/article/details/84766558

 

相关： elementUI的form的 lable的两端对齐    https://www.cnblogs.com/niluiquhz/p/10512492.html