text-align: justify对单行无效是因css规范限定其仅作用于多行文本，单行时退化为left；需用::after伪元素插入width: 100%的inline-block占位符强制触发拉伸机制。
text-align: justify 为什么单行没反应？
因为浏览器规范明确要求：text-align: justify 只对**多行文本**生效——当内容不足一行时，它退化为左对齐。这不是 bug，是标准行为。常见于表单项标签（如「姓名」「手机号」）这类固定宽度 + 单行场景。
SCSS 中用 ::after 伪元素补全最后一行
这是目前兼容性最广（IE9+、所有现代浏览器）的方案，核心是插入一个占满整行宽度的不可见块，强制浏览器把当前行也当作“需要拉伸”的行来处理：
.justify-label {
width: 120px;
text-align: justify;
&::after {
content: '';
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}
}
注意三点：
• 必须给父元素设固定 width，否则 width: 100% 无意义
• display: inline-block 是关键，block 会换行破坏布局
• 不要用 font-size: 0 或 line-height: 0 去隐藏，它们在某些安卓 WebView 下可能触发渲染异常
text-align-last: justify 能不能直接用？
能，但得看目标环境。它本意就是解决“最后一行也要两端对齐”，语法简洁：
.justify-safe {
text-align: justify;
text-align-last: justify; // 仅作用于最后一行
}
实际兼容性限制明显：
• Safari 全系列（包括 iOS 17+）至今不支持 text-align-last 的 justify 值
• Android WebView（尤其旧版 Chrome 内核）存在偶发失效
• 如果项目明确不支持 Safari，或只跑在 Electron / 微信小程序（Webview 内核较新），可以放心启用
• 否则建议 fallback 到 ::after 方案，SCSS 里可封装成 mixin 统一调用
中文场景下 spacing 不均匀怎么办？
默认 text-align: justify 按单词间隙拉伸，对中文无效（中文无空格分词）。此时需配合 text-justify: inter-character：
.justify-cn {
text-align: justify;
text-justify: inter-character; // 按字符间拉伸
-moz-text-justify: inter-character; // Firefox 旧前缀
}
但注意：
• inter-character 在 Safari 和部分 Edge 版本中被忽略，回退到默认行为
• 若必须严格对齐且内容可控（如固定字段名），更稳妥的做法是拆字 + letter-spacing 控制，而非依赖 justify
• 多数业务场景中，::after + 固定宽度 + 左右留白，比强求字符级对齐更稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
