text-align: justify 在中文中常“失效”是因为浏览器依赖可断行点，而中文无默认空格，需配合 text-justify: inter-character 或 hyphens: auto（配合 lang="zh"）才有效；纯 CSS 两端对齐不可靠，高保真场景建议结构化处理。
text-align: justify 是唯一可靠的方式，但中文两端对齐效果差、易出空格断裂，必须配合其他 CSS 才能实用。
为什么 text-align: justify 在中文里经常“失效”
浏览器对 这是一段中文文本text-align: justify 的实现依赖于「可断行点」：英文按单词空格断，中文默认无空格，所以多数浏览器（尤其 Chrome 和 Safari）不会主动在汉字间插入弹性间距，导致最后一行明显左对齐、整段看起来没“撑开”。
更糟的是，某些字体（如部分 Web 字体或系统等宽字体）会完全忽略该声明。
常见错误现象：left 几乎一样。
text-align: justify 必须搭配 text-justify 或 hyphens 才有效
仅设 text-align: justify 不够，需显式启用中文断行策略：
• 对现代浏览器（Chrome 120+、Firefox 110+、Safari 17.4+），加 text-justify: inter-character; 强制按字断行并拉伸间距
• 若支持 hyphens: auto;（需配合 lang="zh" 属性），部分浏览器会在语义边界尝试断词（但中文支持仍弱）
• 必须设置 lang="zh" 到 或父容器，否则 hyphens 和部分 text-justify 行为不触发
• 示例：
<p style="text-align: justify; text-justify: inter-character;" lang="zh">这是一段用于演示两端对齐的中文段落。它需要足够长度才能体现效果。</p>
替代方案：用 letter-spacing + text-align: justify 模拟（慎用）
当 text-justify: inter-character 兼容性不足（如旧版 Edge 或 iOS Safari 16-），可退而求其次手动微调：
• 只对多行段落使用，单行无效
• 配合 text-align: justify 后，用 letter-spacing: 0.05em; 稍微扩大字距，视觉上“撑满”更自然
• 但不能设过大，否则破坏可读性；且需用 @supports 隔离，避免覆盖已支持原生 justify 的环境
• 容易踩的坑：letter-spacing 会影响所有字符（包括标点），句号、顿号后会多出异常间隙；建议只在 text-justify 不可用时作为降级手段
真正可靠的两端对齐，靠结构而非纯 CSS
对出版级排版要求（如电子书、PDF 导出、长文阅读页），纯前端 真正麻烦的不是怎么写那行 justify 始终不稳定。更务实的做法是：
• 用 ）或 （仅限关键位置）
• 或服务端预处理：将长段落拆成带 word-break: break-word; 和 text-align: justify; 的多 ，每行末尾加弹性
• 这类方案绕开了浏览器渲染限制，但代价是增加 DOM 复杂度和维护成本——简单页面没必要，高保真场景值得投入text-align: justify，而是得判断当前项目是否真的需要它：多数网页正文用 left + 合理 line-height 和 max-width 更清晰；只有法律文书、报纸专栏、印刷导出等场景才值得深挖兼容细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
