text-align: justify 对中文无效是因为浏览器只在单词边界拉伸间距，而中文无空格分隔；解决方案是配合 text-justify: inter-character 与 lang="zh" 使用，并用 text-align-last: justify 处理末行。
纯 text-align: justify 在中英文混排时“不生效”，不是你漏写了样式，是浏览器根本没在汉字之间插空隙——它只认空格、连字符这类 Unicode 单词分隔符，而中文没有。
为什么 text-align: justify 对中文段落看起来没反应
浏览器默认只在「单词边界」拉伸间距。英文有空格，所以单词间能撑开；中文每个字都是独立字符（U+4E00–U+9FFF），不属于任何单词分隔类，justify 就直接跳过。结果就是：整段左对齐，末行裸露，和没写一样。
- 单行文本永远不触发
justify行为，哪怕加了也无效 - 容器没设
width或max-width，浏览器无法确定“两端”在哪 - 用了等宽字体（如
"Courier New"）或某些 Web 字体，会主动禁用字距拉伸逻辑 - 混排时英文部分正常撑开，中文挤成一团，视觉割裂明显
text-justify: inter-character 是当前最干净的解法，但有硬性前提
这个属性强制以「字符」为单位插入弹性间距，包括汉字、英文字母、数字、标点——不再依赖空格。但它不是万能开关，必须满足两个条件才真正起效：
- 必须配合
text-align: justify使用，单独写text-justify无效 - 必须在
或最近的块级父容器上声明lang="zh"，否则 Safari 可能静默忽略 - Chrome 120+ / Edge 120+ / Firefox 110+ / Safari 17.4+ 支持；Firefox 128 已退回到基础 justify 行为，Safari ≤17.3 完全不识别
正确写法示例：
<p lang="zh" style="text-align: justify; text-justify: inter-character;">这是一段中英文混排的段落，Hello world，测试两端对齐效果。</p>
最后一行也要撑满？加 text-align-last: justify
justify 规范里，最后一行默认左对齐。想让它也贴边，唯一可靠方式是显式声明 text-align-last: justify。注意它只在 text-align 为 justify 时生效。
- 对单行文本（如卡片标题、表单 label）同样有效，前提是内容足够长或容器宽度受限促发换行
- Safari ≤15.4 不支持，若需兼容，可用
max-width: max-content强制折行，再配text-align-last - 不要把它当全局样式加在
body上——不同语种段落行为不一致，容易引发意外断行
兼容性兜底方案：JS 插入空格 + letter-spacing 要慎用
在不支持 text-justify: inter-character 的环境（如 iOS Safari ≤16），可用 JS 把中文字符串 "你好" 拆成 "你 好 "（注意末尾空格），再用 letter-spacing: -0.15em 收紧。但这只是视觉欺骗，不是真实 justify。
- 必须用
@supports not (text-justify: inter-character)包裹，避免覆盖原生支持环境 -
letter-spacing会影响所有字符，句号、顿号后也会被压缩，易造成标点粘连 - 仅适用于多行段落；单行无效，且容器宽度需可控，否则过度拉伸失真
- 别指望它处理自动断词（如“中华人民共和国”不会在“人民”后断），hyphens: auto 对中文也基本无效
真正需要高保真两端对齐的场景（如电子书、PDF 导出），纯 CSS 方案始终存在断行点不可控、字体度量差异等问题。很多所谓“完美对齐”，背后其实是服务端预处理或 JS 动态切分 + 零宽空格（）注入——这不是妥协，而是面对排版复杂性的合理分工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
