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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</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 动态切分 + 零宽空格()注入——这不是妥协,而是面对排版复杂性的合理分工。


















