← 首页 / Web 排版：一行字怎么排布 待审核 10 页

Web 排版：一行字怎么排布

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

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

wrap · break

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

软换行机会在哪、长单词撑破容器怎么办。white-space(normal / nowrap / pre / pre-wrap / pre-line / break-spaces)、overflow-wrap vs word-break vs line-break、连字符 hyphens、以及新的 text-wrap: balance / pretty（标题不再「孤字落单」）。

 collapse · white-space

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

连续空格、换行、Tab 在渲染时被「折叠」——规则由新两值属性 white-space-collapse(collapse / preserve / preserve-breaks / break-spaces)× text-wrap-mode(wrap / nowrap)掌管，老的 white-space 单值(normal / pre / pre-wrap / pre-line)如今只是它们的 shorthand。交互矩阵实测每种组合 + 映射表。

 truncate · ellipsis

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

单行 text-overflow: ellipsis 为什么必须配 overflow: hidden + white-space: nowrap 三件套（逐个开关验证缺一不可）、多行 -webkit-line-clamp 四件套配方，以及经典需求「一行居中、多行居左」的两个纯 CSS 方案对照。

 align · justify

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

text-align: justify 靠拉宽行内空隙让右边界对齐——但拉哪里？西文拉词间空格(inter-word)、CJK 只能拉字与字之间(inter-character)，这正是 text-justify 管的事。实测各值在主流浏览器的 真实支持、CJK 与西文的差异、最后一行 text-align-last，以及窄版心下「河流」空隙怎么来的。

 leading · line-height

行高与 leading：行与行隔多远

line-height 取数值 / 单位 / normal 的继承差异、leading 如何上下半分(half-leading)、首末行多出来的半行距、以及用新的 text-box-trim / text-box-edge 把行盒裁到字面框做精确垂直对齐。

 spacing · indent

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

letter-spacing(tracking)与 word-spacing 的尺度、CJK 字间距、首行缩进 text-indent（含负缩进做 hanging indent）。和 font-features 系列的 tab-size / text-autospace 互为补充。

 writing-mode · 竖排

书写模式：把文字竖起来

writing-mode(horizontal-tb / vertical-rl / vertical-lr)让正文竖排，text-orientation(mixed / upright / sideways)管每个字转不转向，text-combine-upright 做「縦中横」（竖排里把两位数横过来）。古籍 / 日文排版的根基。

 bidi · direction

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

RTL 与 LTR 文字、数字混排时，浏览器按 Unicode Bidi Algorithm 把逻辑顺序重排成视觉顺序。direction、unicode-bidi(isolate / bidi-override / plaintext …)、HTML dir attribute 与 CSS 的覆盖关系，外加新属性 reading-flow 的现状。

 punctuation · 禁则

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

标点悬挂 hanging-punctuation（让句号挂到版心外让边界更齐）、全角 / 半角标点的取舍、CJK 标点挤压 text-spacing-trim、以及行首不能是逗号句号、行尾不能是开引号的避头尾禁则（line-break 的 strict / normal / loose）。

 fragmentation · break

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

多栏 (columns) 与打印分页把内容流切进一个个 fragmentainer——break-before / break-after / break-inside 控制切口落点。实测卡片在三栏容器里被拦腰切开 / 整体搬移的行为，以及旧名 page-break-* 与 @media print 的渊源。

相关链接

📐 规范 / 文档

  • 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 竖排书写模式的实时浏览器支持矩阵。

📄 属性细节 / 延伸

🧩 分栏 / 分页

  • 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。