text-align: justify 对单行无效是因CSS规范要求必须有换行才触发两端对齐；需用 label::after { content: ""; display: inline-block; width: 100%; } 伪元素制造占位断点，使浏览器识别为多行并启用拉伸。
text-align: justify 为什么对单行无效
直接给 label 加 text-align: justify，发现根本没反应——不是 bug，是 CSS 规范明确写的：单行文本不触发两端对齐。浏览器只在“有换行”的情况下，才去拉伸单词/字符间距。表单项标签通常就一行，所以得「骗」它有第二行。
- 最轻量做法：用
::after伪元素插入一个不可见但占位的空格，强制生成“视觉上的第二行” - 必须设
content: ""+display: inline-block+width: 100%，否则伪元素不占满行宽，拉伸失效 - 别用
伪元素占位的具体写法和关键样式
核心不是加个伪元素就行，而是它得“撑开最后一行”，让 justify 有空间可分配。下面这段是真正起效的最小集合：
label {
text-align: justify;
}
label::after {
content: "";
display: inline-block;
width: 100%;
}
-
width: 100%是关键，它让伪元素独占整行末尾，相当于人为制造了换行断点 - 不需要
height、line-height，加了反而可能破坏基线对齐 - 如果 label 里含
input等内联子元素，确保它们没设置vertical-align: top/middle/bottom，否则伪元素会错位
和 flex 布局混用时的冲突点
很多人在 form 或 div 上用了 display: flex，再给子 label 加 justify，结果完全没效果——因为 justify 只对块级容器内的内联内容生效，而 flex item 默认是“块级盒子”，内部文本不再参与行盒布局。
- 若父容器是
display: flex，justify 在子label上基本失效，别硬调 - 替代方案：改用
justify-content: space-between控制整个 flex 容器的子项间距，更可靠 - 真要保留 justify，就得把
label的display改回inline-block或block，并确保它不在 flex 上下文中
IE 兼容性和移动端的隐性问题
IE11 支持 text-align: justify 和 ::after，但有个坑：它对 width: 100% 的伪元素计算不准，尤其在缩放或 font-size 动态变化时，容易导致最后一行塌陷。
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法是补一句
font-size: 0在label上，再在真实文字里重置字号，避免 IE 对空伪元素的宽度误判 - iOS Safari 旧版本（≤12）对
inline-block伪元素的 baseline 处理异常，可能让 label 和 input 垂直错位，加vertical-align: top到 label 可缓解 - 别依赖 justify 实现精确像素对齐，它本质是“分布式拉伸”，字符间距浮动，设计稿要求严格对齐时，flex 或 grid 更可控
