现代浏览器中text-align: justify对中文两端对齐基本无效，因缺乏断行空格且移动端支持弱；需配合零宽空格与JavaScript补位，并设置text-align-last: left及合理line-height/font-size。
text-align: justify 在现代浏览器中基本可用，但中文排版效果差、移动端支持弱
直接用 text-align: justify 能触发两端对齐，但对中文几乎无效——浏览器默认不为中文单词间插入空格，导致最后一行严重缩进或挤成一团。Chrome、Firefox 桌面端勉强可用，iOS Safari 和 Android WebView 多数版本会忽略该声明，或只对英文生效。
justify-content 不是文字对齐方案，别和 flex 布局混淆
justify-content 是 Flexbox 容器的属性，控制的是子元素在主轴上的分布，和单行/多行内联文本的字间距无关。想靠它让段落文字两端对齐，结果只会发现整个段落被当做一个 元素“居中”或“拉伸”，毫无意义。
真正可行的兼容写法：CSS + 零宽空格 + JavaScript 补位
纯 CSS 无法可靠解决中文两端对齐，必须配合内容干预。核心思路是：在中文字符间手动插入可断行、不可见、不影响语义的占位符，再用 text-align: justify 触发浏览器计算。
- 最轻量做法：服务端或前端 JS 在每个中文字符后加
（零宽空格），例如你好世界 - 避免过度插入：只在非标点、非数字、非英文字母的相邻中文字符之间加，否则影响复制和 SEO
- 必须配合样式：
p.justify { text-align: justify; text-align-last: left; /* 末行左对齐，防止单字撑满 */ } - 移动端仍需降级：检测
getComputedStyle(el).textAlign === 'justify'是否生效，不生效则 fallback 到左对齐
line-height 和 font-size 过小会导致 justify 失效或错位
某些安卓 Webview（尤其旧版 UC、QQ 浏览器）在 line-height 或 font-size 时会跳过 justify 计算。这不是 bug，是渲染引擎为性能做的妥协。
立即学习“前端免费学习笔记（深入）”；
- 确保
line-height≥1.3，font-size≥14px（rem/em 同理） - 避免用
rem配合过小的根字号（如html { font-size: 10px; }），易触发底层限制 - 若必须小字号，改用
text-align: left+ 手动 JS 插入
中文两端对齐从来不是“设个 CSS 就完事”的事，关键在理解浏览器何时愿意拆分、何时选择忽略——而那个时机，往往取决于你有没有给它留下可操作的缝隙。
