text-align:justify 两端对齐失效原因和解决办法

text-align CSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。但注意：justify 文字向两侧对齐，仅对多行文本有效，将内容隔开，使其左右边缘与行框的左右边缘对齐，对最后一行无效。

但比较坑的是 text-align:justify 只对多行文本生效，一行文本是不生效的。

text-align 还有一个 justify-all，和 justify 一致，但是强制使最后一行两端对齐。

<div class="unable">
  <span>CommandNotFound</span>
  <span>发音</span>
  <span>坑否</span>
  <span>技术，避免遇坑</span>
</div>
<br>
<div class="able">
  <span>CommandNotFound</span>
  <span>发音</span>
  <span>坑否</span>
  <span>技术，避免遇坑</span>
</div>

.unable span,.able span{
  display: block;
    text-align:justify;
  height: 20px;
  width: 150px;
}
.able span:after {
  content:'';
  width: 100%;
  display: inline-block;
  height: 0;
}

text-align:justify 单行文本两端对齐效果如下：

CommandNotFound 发音坑否技术，避免遇坑

text-align:justify 两端对齐失效原因和解决办法

text-align:justify 单行文本两端对齐效果如下：

text-align:justify 扩展阅读：

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

发表评论