text-align: justify对单行文本完全无效，因css规范要求其仅在多行段落中生效；需用::after伪元素插入width: 100%的不可见占位符（如content: "\00a0"）骗浏览器激活拉伸机制。
text-align: justify 对单行文本完全无效——不是你写错了，是 CSS 规范明确要求它只在多行段落中生效。想让单行文字“撑满容器左右边缘”，得绕过 justify 本身，用视觉模拟。
为什么 text-align: justify 在单行上没反应
浏览器只对能自然换行的块级内容执行两端对齐逻辑。单行文本没有“行间拉伸空间”，justify 直接跳过处理，退化为 text-align: left。这不是 bug，是标准行为。
用 ::after 伪元素强制触发 justify
核心思路：骗浏览器“这行后面还有内容可换行”，从而激活 justify 的拉伸机制。
- 给容器加
text-align: justify - 用
::after插入一个display: inline-block、width: 100%的不可见占位符 - 必须设
content: "\00A0"（不间断空格），比零宽空格更稳定，不易被剪贴板或编辑器吞掉 - 避免用
visibility: hidden或float，它们会破坏 inline-flow，导致拉伸失效
.single-line-justify {
text-align: justify;
}
.single-line-justify::after {
content: "\00A0";
display: inline-block;
width: 100%;
}
移动端和兼容性要特别注意
iOS Safari（尤其 15.4 之前）和旧版安卓 WebView 对该 hack 支持不稳定；Chrome/Firefox/Safari 17.4+ 基本可用，但若容器宽度小于 6 个汉字宽度，字间距可能被强行撑开，视觉失衡。
- 务必限定容器有明确宽度（如
width: 300px或max-width），否则响应式下易失控 - 避免用于按钮、导航项等短文本——
letter-spacing模拟更可控，但需手动调参 - 若内容动态生成，JS 插入
\u00A0时记得加aria-hidden="true"，防止屏幕阅读器误读
真正麻烦的不是怎么写，而是判断什么时候不该用：标题、标签、表单控件这类强调语义和可读性的单行文本，硬套两端对齐反而降低扫描效率。视觉“整齐”不等于排版合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
