Chrome 104+ 才支持 text-justify: inter-character,旧版 Chrome、所有 Safari(iOS 17.4 前)、多数 Android WebView 均不解析该值,无报错亦无回退,仅静默忽略。

text-justify: inter-character 在 Chrome 104+ 才生效,旧版直接静默
写了 text-justify: inter-character 却没反应?不是你写错了,是浏览器根本没解析——Chrome 104 之前、所有 Safari(包括 iOS 17.4 之前)、大部分 Android WebView 都不认这个值。它不会报错,也不会 fallback,就是当没写。
常见错误现象:text-align: justify 看起来完全没变化;开发者工具里该属性显示为“已禁用”或灰色;换行后末行仍左对齐,且字距毫无调节痕迹。
- Firefox 用
-moz-text-justify: inter-character兼容,但仅限较新版本(≥102) - 别填
inter-word或distribute——前者对中文无效,后者在 Chrome 已被弃用,Safari 完全无视 - 该属性不继承,子元素如
<em>或<strong>里文字会恢复默认间距,需显式重设或用inherit
移动端两端对齐常让末行更松散,而不是更整齐
小屏下 text-justify: inter-character 不是补救手段,而是放大器:单行只有 3–4 个汉字时,Chrome 渲染引擎会主动放弃拉伸,但声明仍在,导致末行字距分配紊乱,出现“空一格又挤一起”的断裂感。
中英文混排时问题更明显:letter-spacing: -0.05em 和 text-justify 的拉伸逻辑叠加,不是覆盖——浏览器先压缩再强行拉伸,结果字距忽大忽小。
立即学习“前端免费学习笔记(深入)”;
- iOS Safari 完全不支持
text-justify,哪怕写了也白写;text-align-last: justify要到 iOS 16.4+ 才稳定,低版本必须手动兜底 - 富文本场景(如用户评论)中,短句(≤5 字)插入零宽空格
反而易引发断行错位,不如 JS 动态检测后仅对 ≥6 字段落启用 - 伪元素兜底方案必须用
display: inline-block+width: 100%,float或visibility: hidden会导致高度异常
真正能跨浏览器落地的组合策略
放弃靠单一 CSS 属性“一招制敌”,分层处理才是现实解法:
- 基础层:
text-align: justify+text-justify: inter-character+-moz-text-justify: inter-character,仅对多行、块级、宽度明确的容器启用 - 末行兜底层:用
::after插入content: "\00A0"(不间断空格),比零宽空格更可靠,不易被剪贴板误删 - 兼容降级层:媒体查询
@media (max-width: 480px)中直接切回text-align: left,比硬调text-justify更尊重小屏阅读节奏 - 动态内容层:服务端或 JS 对中文段落每行末尾插入
,但只在检测到行宽 ≥ 8 字时才触发,避免短句被撑开
letter-spacing 不是微调工具,而是兼容性雷区
很多人用负值 letter-spacing 想“压紧间隙”,实际让问题更隐蔽也更难调试:
-
letter-spacing: -0.15em在 14px 字号下,中文字距压缩过度,相邻字形视觉粘连 - 英文单词内部字母被强制插入负间隙,与
hyphens: auto冲突,连字符失效 - 该属性不可继承,子元素若未重置,会出现内嵌文字突然变密或变疏
- 真要微调,仅限纯中文段落,且限
letter-spacing: -0.03em~-0.05em,并配line-height: 1.6缓冲视觉压迫感
移动端两端对齐的本质矛盾在于:浏览器渲染基于行盒(line box)的离散计算,而中文无天然词界。所谓“间隙过大”,往往是强行要求它做出版级字距光学补偿——最稳妥的做法,是在窄屏下接受左对齐,而非执着于视觉上那点对称感。


















