左右对齐Justify遇到的坑

遇到的问题

这两天在开发一个病历的对外展现页面，设计稿上label是左右拉伸对齐的，显示效果以下：

怎么实现这种效果呢？

首先想到的是文字中间加空格，可是这种方式太low了，并且不太容易控制。网上查资料，发现用justify能够实现。

.item-field {
    display: inline-block;
    width: 80px;
    text-align: justify;
}
.....
<div>
    <label class="item-field">主诉：</label>
</div>

可是加上上述样式后，文字依然没有左右对齐。

justify为何没有生效呢？

查询MDN上关于text-align的介绍，发现text-align有如下规则：

1. text-align只对块级元素或者table-cell有效果
2. text-align并不控制块元素本身的对齐，只控制它的行内内容的对齐
3. justify ：文字向两侧对齐，对最后一行无效

因为label标签的内容"主诉"只有一行，因此justify没有生效

解决方式

给label标签添加伪元素，伪元素独占一行且是最后一行，这样label的内容就能够左右对齐

.item-field {
    display: inline-block;
    width: 80px;
    text-align: justify;
    line-height: 0;
}

.item-field::after {
    content: '';
    height: 0;
    width: 100%;
    display: inline-block;
    line-height:
}

注释：
::after用来建立一个伪元素，做为==已选中元素的最后一个子元素==。一般会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

小结

text-align: justify能够设置元素内容左右对齐，可是对最后一行不生效。若是内容只有一行，可经过伪元素添加一个空行，实现内容左右对齐的效果。

参考

• MDN：text-align
• MDN：伪元素::after

首发地址：http://www.geeee.top/2019/11/20/justify/， 转载请注明出处！