单行文本两端对齐

问题

单行文本如何实现两端对齐？text-align: justify 对最后一行无效，而单行文本会被视为最后一行。

解答

方法一：添加伪元素创建新行

通过 ::after 伪元素添加内容，使原本的单行文本不再是最后一行，从而触发 justify 效果。

<div class="item">
    <span class="label">{{item.label}}</span>：
    <span class="value">{{item.value}}</span>
</div>

.item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
}

.label {
    display: inline-block;
    width: 100px;
    text-align: justify;
    overflow: hidden;
}

.label::after {
    content: '';
    display: inline-block;
    width: 100%;
}

方法二：使用 text-align-last

text-align-last 属性专门用于定义最后一行的对齐方式，可以直接解决单行文本对齐问题。

.label {
    display: inline-block;
    width: 100px;
    text-align: justify;
    text-align-last: justify;
}

关键点

• text-align: justify 对最后一行文本不生效
• 方法一通过伪元素强制创建新行，让目标文本不再是最后一行
• text-align-last 可以直接控制最后一行的对齐方式
• text-align-last 现代浏览器支持良好，推荐使用