CSS 基础篇（2）：让text-align: justify起作用

有这样一个需求，如下图红框，不管是2个字还是3个字还是4个字，两端都需要对齐

第一反应是使用text-align: justify;，但直接使用，却发现不起作用！

下面看一下使用text-align: justify;前后的变化

<style>
.box {
  width: 200px;
  background: gray;
}
p {
  color: white;
}
</style>
<div class="box">
<p>这是文字，这是文字，这是文字，这是文字，这是文字，这是文字</p>
</div>

效果如下

使用text-align: justify;

p {
  text-align: justify;
}

效果如下

前2行文字，和我们预期的一样，但是最后一行，问题就出在text-align: justify;对最后一行，没有任何影响！

回到开始，解决办法就是让要显示的文字不是最后一样就可以，比如使用伪元素

&:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
}

ifeees / articles