为啥不起作用

在实际开发过程中常常会遇到这样的布局：两端对齐

image-20200729155613154

会用到 text-align:justify; 样式来进行两端对齐，然后发现并没有什么卵用；

原因是 text-align:justify; 对文本中的最后一行不起作用，所以说布局结构中的文字一共一行，即第一行也是最后一行，导致样式没用。

解决方法

解决方法一 ：通过设置 text-align-last: justify; 来设置最后一行两端对齐；

但是这个属性并不能被所有浏览器兼容，所以还需要再加上 text-justify: distribute-all-lines;

1
2
3
text-align: justify;
text-align-last: justify;
text-justify: distribute-all-lines;

解决方法二：给文本末尾添加行内块元素，设置宽度100%，这样行内块元素会自动换行就一定是两行了，然后样式起作用了。

可以添加个伪元素，设置成行内块

1
2
3
4
5
6
7
8
9
10
p{
   text-align: justify;
}
p:after {
    content:'';
    width: 100%;
    display: inline-block;
    overflow: hidden;
    height: 0;
}

但这种方式随之带来一个问题，文本末尾添加的行内块元素会撑开父元素一定高度，使整体样式发生改变，而且设置height:0;和font-size:0;没有效果。

image-20200729164109218

所以，需要给父元素设定固定高度:

1
2
3
4
5
6
7
8
9
10
11
12
p{
   text-align: justify;
   height: 20px;
   line-height:20px;
}
p:after {
    content:'';
    width: 100%;
    display: inline-block;
    overflow: hidden;
    height: 0;
}

image-20200729164609353

END