← Web 排版:一行字怎么排布 / 两端对齐:把右边也对齐,靠「撑开空隙」 待审核 4 / 10
align · justify

两端对齐:把右边也对齐,靠「撑开空隙」

text-align: justify除最后一行外 的每一行右边界也对齐——但一行的字数是定死的,要让它正好顶到右边,只能 把行内的空隙拉宽。问题是 拉哪里的空隙:西文词与词之间有 空格,拉空格就行(inter-word);可中日韩文字 字字相连、没有空格,只能去拉 字与字之间(inter-character)。text-justify 就是这个「拉哪里」的开关。

下面这块 版心 可以拖窄拖宽、切换中英文。打开「显示空隙」后,叠加层用真实 getBoundingClientRect() 把每个被撑开的间隙画成蓝条(越宽越浓),你能直接看见 justify 到底动了哪些空隙、以及 窄容器下空隙怎么暴涨

1 · 关键:justify 撑的是「软空隙」,撑哪种由 text-justify 决定

  • inter-word——只拉 词间空格。对英文有效;对没有空格的纯 CJK 几乎不动(切到「中文」+ inter-word,可见右边界无法对齐)。
  • inter-character——连 字与字之间 都拉开,CJK 两端对齐依赖它。但实测:Chrome / Safari 大多 不实现 此值,按 auto 处理;目前主要 Firefox 实现(下方读数会提示当前浏览器是否真的拉开了字间)。
  • distribute——旧规范值(≈inter-character + 表意文字),已被废弃,老 WebKit / Android 上还能见到,新浏览器多当 auto
  • auto——交给浏览器按语言挑策略:西文 ≈ inter-word,CJK 理应 ≈ inter-character(但同样受实现限制)。none——禁止 justify,即使 text-align: justify 也不撑。

最后一行不参与对齐。 规范规定 justify 不处理一段的最后一行(以及被 <br> 强断的行),否则寥寥几个字会被过度拉伸。要单独控制末行,用 text-align-last——切到 justify 可见末行也被强行撑开,center 则让末行居中(标题常用)。

两端对齐的视觉副作用。 每行独立撑空隙,空隙宽窄不一,上下行的大空隙偶然对齐就连成一道视觉上的 「河流 river」,在窄版心(把宽度拖到 240px)、长单词多时尤其明显——因此正文 justify 通常要 配合 hyphens 断词 才能保持版面均匀(参见 折行与断词 页)。