移动端text-align: justify对单行文本无效，且在ios safari及部分安卓webview中对中文短段落几乎无效，因其依赖空格等可断行位置，而中文缺乏天然词间间隙。
text-align: justify 在移动端不生效的常见原因
直接说结论：移动端 text-align: justify 默认对单行文本无效，且在 iOS Safari 和部分安卓 WebView 中对短段落、中文字体、无空格连续内容几乎“视而不见”。这不是 bug，是规范行为——justify 依赖可断行位置（如空格、标点），中文段落若没显式插入 或用 word-break 配合，浏览器根本找不到伸缩锚点。
- iOS 15+ 之前，Safari 完全忽略单行
text-align: justify，哪怕加了text-justify: inter-word也无效 - 安卓 Chrome 虽支持，但若行末是中文字符+无后续空格，最后一行仍会左对齐（这是 CSS Text Level 3 的预期行为）
-
white-space: nowrap或display: inline-block会直接禁用 justify 效果
让 justify 在移动端真正起作用的三个实操条件
必须同时满足以下三点，justify 才可能稳定出效果：
- 文本至少两行（单行需额外 hack，见下一条）
- 每行内有足够多的“可拉伸间隙”：中文需靠
word-break: break-all强制断字（慎用，影响可读性） - CSS 中显式声明
text-align: justify+text-justify: inter-word（iOS 15.4+ 支持，旧版可忽略）
示例有效写法：
.justify-text {
text-align: justify;
text-justify: inter-word;
/* 补充兼容：防止 iOS 自动压缩行高 */
line-height: 1.6;
}
单行文字两端对齐的替代方案（别硬扛 justify）
想让标题、按钮文字、导航项等单行内容“左右撑满容器”，text-align: justify 是错路。它设计目标是段落排版，不是单行控制。
- 用
text-align: justify+ 伪元素 hack：::after插入一个content: ""并设display: inline-block; width: 100%，强制创建第二“行”来触发 justify —— 但 iOS Safari 对伪元素的 justify 支持不稳定 - 更可靠的是 Flex 布局：
display: flex; justify-content: space-between，把文字拆成独立<span></span>，手动分配空白（适合词数固定场景） - 最通用的是 JavaScript 补空格：检测容器宽度与文字宽度差值，动态在字间插入
aria-hidden="true"
中文字体下 justify 的真实表现与取舍
中文字体没有天然词间空隙，text-align: justify 的“两端对齐”本质是拉伸字间距（letter-spacing）或词间距（word-spacing）。但 CSS 标准里，中文不被视为“word”，所以 word-spacing 对纯中文无效，letter-spacing 又会破坏字形结构。
- Chrome/Edge 可通过
text-justify: distribute启用“分散对齐”（类似 Word 的中文两端对齐），但 Safari 完全不支持 - 若强行用
letter-spacing模拟，需配合font-feature-settings: "kern"保 Kerning，否则字距突兀 - 实际项目中，90% 的所谓“移动端 justify 需求”，最后都回归到“左对齐+右侧补装饰性竖线/点”这类视觉妥协方案
真正难的从来不是加一行 CSS，而是判断：这里到底需不需要物理意义上的两端对齐，还是只要视觉上“看起来齐”就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
