text-align:justify 无效的原因及解决办法 – 珊瑚贝

在 css 中，使用 text-align:justify 可以实现文字两端对齐，但有的时候却无效，原因是：该属性对文本的最后一行无效！也就是如果文字内容只有一行时（视为最后一行）或者多行文本的最后一行是无法实现两端对齐的。

知道了问题的原因后，就很容易想到解决方法了。

本站推荐以下两种解决方法：

1.给文本之后再增加一个标签，使文本不再是最后一行

2.给文字段落增加 after 伪元素

示例：

<style>
.first{width:500px;height:50px;background:#d2e428;text-align:justify;padding:5px;margin-top:30px}
.three{width:100%;display:inline-block}
.four:after{content:'';width: 100%;display: inline-block;overflow: hidden;height: 0;}
</style>
<div class="first">
    <span class="second">零五网[https://www.02405.com] 通过增加空白行实现单行文本两端对齐</span>
    <p class="three"></p>
</div>
<div class="first">
    <span class="four">零五网[https://www.02405.com] 通过after伪类实现单行文本两端对齐</span>
</div>

效果：.first{width:500px;height:50px;background:#d2e428;text-align:justify;padding:5px;margin:20px auto}<br /> .three{width:100%;display:inline-block}<br /> .four:after{content:”;width: 100%;display: inline-block;overflow: hidden;height: 0;}

.first{width:500px;height:80px;background:#d2e428;text-align:justify;padding:5px;margin-top:30px}
.three{width:100%;display:inline-block}
.four:after{content:”;width: 100%;display: inline-block;overflow: hidden;height: 0;}