Web 排版：一行字怎么排布

一段文字交给浏览器,从「一串字符」变成「一块整齐的版面」,中间发生了一连串排版决策: 一行放不下了在哪儿折、长单词要不要断开、右边要不要对齐、靠拉哪里的空隙对齐、 行与行隔多远、字与字之间松紧,乃至竖排时字怎么转向。这些都由 CSS Text / Writing Modes 模块的一组属性掌管。本系列把它们逐个拆开,每页一块可拖宽度、可切参数的版心,用真实 getBoundingClientRect() 实测浏览器的实际排版结果。

十页覆盖排版全景,从空白折叠、折行一路讲到双向文本与分栏分页。每页都有一个「浏览器真实行为」实测点 —— 不少 CSS 值(如 text-justify: inter-character、hanging-punctuation)主流浏览器 并不实现,页面会当场测量并如实标注。前置知识:行盒(line box)与 inline 布局的基础概念, 可参考 inline-block 系列。正文用中文,属性 / 取值等关键词保持英文。

wrap · break

折行与断词：一行放不下了怎么办

折行的三层控制：允不允许断、在哪里断、断得好不好看。balance 给标题，pretty 给正文。

collapse · white-space

空白折叠：源码里的空格去哪儿了

white-space 拆成 white-space-collapse 与 text-wrap-mode 两个 longhand，能表达的组合比老单值更多。

truncate · ellipsis

截断与省略：放不下的文字怎么收尾

单行截断靠三件套缺一不可，多行截断长期依赖 -webkit-line-clamp，标准的 line-clamp 正在落地。

align · justify

两端对齐：把右边也对齐，靠「撑开空隙」

两端对齐撑的是软空隙，撑哪一种由 text-justify 决定。窄容器下空隙会暴涨，这是它最常见的翻车点。

leading · line-height

行高与 leading：行与行隔多远

line-height 决定行盒高度，多出来的部分对半分到字形上下即 half-leading。无单位写法与带单位写法的继承行为不同。

spacing · indent

字间距与缩进：松紧与首行

word-spacing 撑的是词间空格，所以对 CJK 几乎无效；letter-spacing 则对两种文字一视同仁。

writing-mode · 竖排

书写模式：把文字竖起来

writing-mode 换书写方向，text-orientation 决定拉丁字母与数字在竖排里的朝向，縦中横把年份挤进一个字位。

bidi · direction

双向文本：RTL 混排时字符的视觉顺序

逻辑顺序与视觉顺序的分离：Unicode 双向算法负责字符级重排，direction 与 unicode-bidi 决定它在哪里断开。

punctuation · 禁则

标点与禁则：行首与行尾的规则

CJK 的避头尾与标点悬挂：line-break 管禁则强度，hanging-punctuation 把标点挂出版心，后者目前只有 Safari 实现。

fragmentation · break

分栏与分页：内容在哪儿被切开

break-inside 与 break-before 管的是内容在分栏与分页边界上怎么断，前身是 CSS2 时代只管打印的 page-break-*。

相关链接

📐 规范 / 文档

• CSS Text Module Level 4 drafts.csswg.org 本系列大半属性的规范本体:white-space-collapse / text-wrap / text-justify / hanging-punctuation / text-spacing-trim 等折行、对齐、空白、断词的处理模型。
• CSS Writing Modes Level 4 drafts.csswg.org writing-mode / text-orientation / text-combine-upright 与逻辑方向随书写模式对调的规范定义。
• MDN · CSS text 模块总览 developer.mozilla.org CSS Text 模块的属性索引页:从这里可跳转到 white-space / overflow-wrap / word-break / hyphens / line-break 等每个属性的详页与指南。
• MDN · writing-mode developer.mozilla.org 竖排书写模式各取值的含义、可动画性与浏览器回退方案。
• Can I use · text-wrap: balance caniuse.com 标题平衡折行的实时浏览器支持矩阵(pretty 另有条目)。
• Can I use · hyphens caniuse.com 自动连字符断词的浏览器支持与 lang 依赖说明。
• Can I use · line-clamp caniuse.com 多行截断 -webkit-line-clamp 的浏览器支持矩阵。
• Can I use · writing-mode caniuse.com 竖排书写模式的实时浏览器支持矩阵。

📄 属性细节 / 延伸

• text-justify · MDN developer.mozilla.org auto / inter-word / inter-character / none 各值含义,以及「distribute 已废弃、多数浏览器只实现 inter-word」的现状说明。
• text-align-last · MDN developer.mozilla.org 单独控制一段(或被 justify 的块)最后一行的对齐方式。
• CSS Text Module Level 3 · §7 Justification w3.org 规范原文:text-align: justify 的展开、justification opportunity(词间 / 字间)的定义、为何不处理最后一行与强制换行行。
• CSS Text Level 3 · Line Breaking & Word Boundaries w3.org white-space / overflow-wrap / word-break / line-break / hyphens 的规范定义:软换行机会、强制断点、CJK 避头尾。
• Better Typography with text-wrap: pretty webkit.org WebKit 实现 text-wrap: pretty 的设计:评估整段(对比 Chrome 仅末 4 行)、改善 rag、避免短末行、减少连续断字,以及它与 balance 的分工(正文 vs 标题)。
• CSS Writing Modes Level 4 w3.org writing-mode / text-orientation / text-combine-upright,以及 inline / block 逻辑方向随书写模式如何对调。
• 中文排版需求 · Requirements for Chinese Text Layout w3.org · clreq W3C 的中文排版规范文档:避头尾禁则、标点挤压、全角半角、竖排等中文专属排版规则的权威依据。
• 姊妹系列:字体里的隐藏开关 · font-features playground · font-features 本系列管「行怎么排」,那个系列管「字形怎么选」(tabular-nums / OpenType feature / text-autospace / tab-size),两边在 spacing 一页接上。

🧩 分栏 / 分页

• CSS Fragmentation Module Level 3 w3.org 规范原文:fragmentainer 的定义、break-* 三属性的取值与冲突合并规则(相邻元素的 break-after 与 break-before 如何取强者)。
• CSS fragmentation · MDN developer.mozilla.org 模块总览:break-before / break-after / break-inside、orphans / widows,以及与 page-break-* 旧名的 alias 关系。
• break-inside · MDN developer.mozilla.org avoid / avoid-page / avoid-column 各值的浏览器兼容表 —— 分栏场景兼容性最好的是 avoid。