text-align: justify 对中文基本无效，因汉字间无天然断点；需配合 text-align-last: justify、零宽空格或 letter-spacing 模拟，且在 flex 容器中需设 width: 100% 才生效。
text-align: justify 为什么看起来没生效
常见现象是文字明明写了 text-align: justify，但行末还是左对齐，甚至整段都没变化。根本原因：浏览器只对**有换行机会的块级文本**做两端对齐，单行、无空格/连字符的长单词（比如一串中文 URL 或连续英文不换行）、或容器太窄导致无法分词时，justify 就“无事可做”。中文尤其明显——汉字间默认无天然断点，浏览器不会在字与字之间加空隙。
- 确保内容至少两行以上（单行无法 justify）
- 避免在段落里塞
<span></span>打断自然流 - 英文需有空格分隔单词；中文若想强制断词，得配合
word-break: break-word或overflow-wrap: break-word（但注意这会破坏语义断行）
中文两端对齐的实际可用方案
纯 text-align: justify 对中文基本无效，因为没有空格作为伸缩锚点。真正能用的组合是：
- 加
text-align-last: justify—— 让最后一行也参与拉伸（否则默认左对齐） - 配合
text-justify: inter-ideograph（仅 Safari 和旧版 IE 支持，Chrome/Firefox 忽略） - 更通用的做法：用
letter-spacing+text-align: justify模拟，但必须限定容器宽度固定、且内容长度可控，否则空隙忽大忽小 - 生产环境推荐：服务端或 JS 预处理，在每字后插入
（零宽空格），让浏览器把它当潜在断点；但要注意屏幕阅读器兼容性和 SEO 影响
justify 在弹性布局或 flex 容器里的行为异常
如果父容器是 display: flex，子元素即使设了 text-align: justify 也大概率失效——因为 flex item 默认是“内容尺寸”，没有足够宽度供 justify 分配空白。此时 justify 的作用域被压缩到实际文字宽度内，等于没用。
- 解决方法：给文字容器显式设
width: 100%或flex: 1，让它撑开 - 更稳妥的是避免在 flex 主轴方向依赖 justify；改用
justify-content: space-between处理多词并列（如导航栏文字） - 表格单元格（
<td>）中 justify 表现稳定，因 table layout 天然提供宽度上下文
justify 引发的渲染性能和可访问性问题
浏览器实现 justify 时需多次测量、重排单词间距，尤其在长段落或频繁 DOM 更新场景下，可能触发额外 layout。更隐蔽的问题是：屏幕阅读器通常忽略由 justify 自动生成的视觉空隙，但若你手动插入 或 来辅助对齐，就可能被读成“空格”或中断语义。
立即学习“前端免费学习笔记（深入）”；
- 不要在标题、按钮、短标签等强调语义清晰的元素上用 justify
- 移动端慎用，部分 Android WebView 对
text-justify解析不一致 - 测试时用键盘 Tab 导航+朗读，确认无多余停顿或错读
