单行label两端对齐需用伪元素欺骗浏览器触发justify：label设inline-block+定宽+text-align:justify，::after设content+width:100%+height:0。
单行 label 要两端对齐，不能只写 text-align: justify —— 浏览器默认不拉伸最后一行，必须“骗”它有两行。
为什么 text-align: justify 单独写没用？
因为 justify 是为段落设计的：它靠在单词/字符间插入空隙来填满整行，但单行文本没有换行点，浏览器认为“已结束”，直接放弃拉伸。尤其中文单字无天然分词边界，更不会自动加间隙。
常见错误现象：
- 写了 text-align: justify，但文字还是左对齐
- 换成英文单词也无效，除非故意加换行符或伪元素撑开
最稳妥的伪元素方案（兼容 Chrome/Firefox/Safari）
核心是让浏览器“误以为”文本有两行：真实文字当倒数第二行，::after 作为最后一行并占满宽度，从而触发 justify 对上一行的拉伸。
-
label必须设为display: inline-block或block，并指定明确宽度（如width: 120px） - 加
white-space: pre-wrap保留可能的换行意图（防意外截断） -
::after设content: ""、display: inline-block、width: 100%、height: 0
label {
display: inline-block;
width: 120px;
text-align: justify;
white-space: pre-wrap;
}
label::after {
content: "";
display: inline-block;
width: 100%;
height: 0;
}别踩这些坑
中文场景下特别容易翻车：
立即学习“前端免费学习笔记（深入）”；
- 纯中文单行 +
justify→ 每个字被平均拉开，像「数 据 结 构」一样生硬，这不是 bug，是浏览器按 Unicode 字符切分的正常行为 - 如果
label里混有img或其他内联元素，它们之间的空白会干扰对齐；可考虑在父容器设font-size: 0，再单独给子元素设字体大小 -
text-align-last: justify看似简洁，但 Safari 不支持（截至 2026 年仍无原生支持），线上项目慎用 - 响应式缩容时，伪元素可能错位，建议配合
min-width或媒体查询做兜底
真正难的不是写那几行 CSS，而是判断什么时候不该用两端对齐——比如 label 只有 2～4 个中文字符时，text-align: left 往往比强行拉伸更清晰、更符合阅读习惯。
