text-align:justify;不起作用是怎么回事?-马克笔记

为什么单独设置text-align:justify;不起作用，非要在后面加一个内联块状元素宽度为100%的才可以？

<style>
.center{
  text-align:justify;
}
span{
  display:inline-block;
  width:100%;
}
</style>
<p class="center">我是两端对齐文字端对齐文字<span></span></p>

方案一

这个是因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行，所以也是最后一行了，所以text-align设置为justify不会产生任何效果。

解决方法是使用text-align-last，并将其设置为justify。

不过不幸的是，text-align-last不是所有浏览器支持。

所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了。

而你的span是inline-block，也可以设置宽度（100%），那么这个时候内联匿名盒的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。

最后，附上text-align-block的各个浏览器支持情况：https://caniuse.com/#search=text-align-last

<style>
.center2{text-align-last:justify;}
</style>
<p class="center2">我是两端对齐文字端对齐文字</p>

方案二

这种时候就可以借助伪元素了：（下面会多一行空格，用span也会多一行空格，height设置成0也不行）

<style>
p.center3{
  text-align:justify;
}
p.center3:after {
      content:'';
      width: 100%;
      display: inline-block;
      overflow: hidden;
      height: 0;
    }
</style>
<p class="center3" style="background:#ccc;">我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我<br>是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字我是两端对齐文字端对齐文字</p>