Chrome 104+才支持text-justify: inter-character,旧版静默失效;移动端因小屏、字数少、中英文混排及letter-spacing叠加,易致字距异常或末行断裂,iOS Safari更完全不支持该属性。

Chrome 104+ 才支持 text-justify,旧版直接静默失效;移动端用它不仅不能缩小间隙,反而可能因字距叠加让最后一行更松散。
为什么 text-justify: inter-character 在移动端常适得其反
这个属性本意是让浏览器按“字符间”拉伸间距实现对齐,但移动端小屏下极易触发负面效果:
- 中英文混排时,
letter-spacing和text-justify的拉伸逻辑会叠加,不是覆盖——比如设了letter-spacing: -0.05em再加text-justify,浏览器先压缩再强行拉伸,结果字距忽大忽小 - 单行仅 3–4 字时(常见于手机窄屏),Chrome 渲染引擎会主动放弃 justify 拉伸,但
text-justify声明仍存在,导致末行字距分配异常,出现“空一格又挤一起”的断裂感 - iOS Safari 完全不支持
text-justify,哪怕写了也当没写,而text-align-last: justify在 iOS 16.4+ 才稳定,低版本 fallback 机制必须手动补
真正可控的移动端两端对齐组合策略
放弃依赖单一 CSS 属性,改用分层兜底:
- 现代环境(Chrome ≥104 / Safari ≥16.4):同时声明
text-align: justify和text-justify: inter-character,并加text-align-last: justify处理末行 - 兼容环境(尤其 iOS ::after { content: ""; display: inline-block; width: 100%; },再配
overflow: hidden防撑高容器 - 富文本动态内容(如用户评论):JS 检测每段末行字数,仅在 ≥5 字时插入零宽空格
,避免短句被强行拉伸 - 必须加
word-break: keep-all,否则中文可能在非预期位置断行,破坏对齐节奏
letter-spacing 不是补救手段,而是风险放大器
很多人试图用负值 letter-spacing “压紧”间隙,实际会让问题更隐蔽也更难调:
立即学习“前端免费学习笔记(深入)”;
-
letter-spacing: -0.15em在小字号(如 14px)下,中文字距压缩过度,相邻字形易视觉粘连 - 英文单词内部字母被强制插入负间隙,与
hyphens: auto冲突,连字符失效 - 该属性不可继承,子元素(如
em、strong)若未重置,会出现内嵌文字突然变密或变疏 - 真要微调,只在纯中文段落用
letter-spacing: -0.03em~-0.05em,且必须配合line-height: 1.6缓冲视觉压迫感
移动端两端对齐的本质矛盾在于:浏览器渲染是基于行盒(line box)的离散计算,而中文无天然词界。所谓“间隙过大”,往往是强行要求它做出版级字距光学补偿。最稳妥的做法,是在媒体查询中对 max-width: 480px 直接降级为 text-align: left,比硬调 text-justify 更尊重阅读体验。


















