CSS 文本模块第 4 级

W3C 工作草案,

关于本文档的更多详细信息
此版本:
https://www.w3.org/TR/2026/WD-css-text-4-20260608/
最新发布版本:
https://www.w3.org/TR/css-text-4/
编辑草案:
https://drafts.csswg.org/css-text-4/
先前版本:
历史:
https://www.w3.org/standards/history/css-text-4/
反馈:
CSSWG 问题仓库
规范内联
编辑:
Elika J. Etemad / fantasai (Apple)
(受邀专家)
(Adobe Systems)
Florian Rivoal (受邀专家)
对此规范提出编辑建议:
GitHub 编辑器
测试套件:
https://wpt.fyi/results/css/css-text/

摘要

此 CSS 模块定义用于文本操作的属性,并规定其处理模型。它涵盖换行、 两端对齐和对齐、空白处理以及文本变换。

CSS 是一种用于描述结构化文档渲染的语言 (例如 HTML 和 XML) 在屏幕、纸张等媒介上的呈现。

本文档状态

本节描述本文档在发布时的状态。 当前 W3C 出版物列表 以及本技术报告的最新修订版 可在 W3C 标准和草案索引中找到。

本文档由 CSS 工作组 作为 工作草案 发布,并使用 推荐标准 轨道。 发布为工作草案 并不表示 W3C 及其成员认可。

本文档是一份草案文档, 可能随时被更新、替换 或由其他文档废弃。 除了作为进行中的工作之外,不宜引用本文档。

请通过在 GitHub 上提交议题(首选)发送反馈, 并在标题中包含规范代码“css-text”,如下所示: “[css-text] ……意见摘要……”。 所有议题和评论都会被归档。 或者,也可以将反馈发送到(已归档的)公共邮件列表 www-style@w3.org

本文档受 2025年8月18日 W3C 流程 文档管辖。

本文档由一个依据 W3C 专利政策运行的小组制定。 W3C 维护一份 与该小组交付成果相关的任何专利披露的公开列表; 该页面还包含披露专利的说明。 实际知晓某项专利的个人,如果认为该专利 包含必要权利要求, 则必须按照 W3C 专利 政策第 6 节披露相关信息。

1. 简介

本模块描述 CSS 的排版控制; 也就是说,CSS 中控制 源文本转换为格式化、自动换行文本的特性。 各种 CSS 属性提供了对 大小写变换空白折叠文本换行断行规则连字符断字对齐和两端对齐间距, 以及 缩进的控制。 关于第 3 级以来的新增内容,参见第 3 级以来的新增内容

注:字体选择由 CSS 字体 模块涵盖。 [CSS-FONTS-3]

用于装饰文本的特性, 例如下划线着重号, 以及阴影, (此前属于本模块) 由 CSS 文本装饰模块涵盖。 [CSS-TEXT-DECOR-3]

双向文本和 竖排文本 由 CSS 书写模式模块处理。 [CSS-WRITING-MODES-4]

关于世界各地各种语言和书写系统的 排版需求的更多信息, 可见于 国际化工作 组语言支持索引[TYPOGRAPHY]

1.1. 模块交互

本模块连同 CSS 文本装饰 模块, 替代并扩展了 层叠样式表第 2 级第 16 章中定义的文本级特性。 [CSS-TEXT-DECOR-3] [CSS2]

除了下文定义的术语之外, 本规范中使用的其他术语和概念定义于 层叠样式表第 2 级CSS 书写模式模块中。 [CSS2][CSS-WRITING-MODES-4]

1.2. 值定义

本规范遵循来自 [CSS2]CSS 属性 定义约定, 并使用来自 [CSS-VALUES-3]值定义语法。 本规范未定义的值类型在 CSS 值与单位 [CSS-VALUES-3] 中定义。 与其他 CSS 模块组合时,可能会扩展这些值类型的定义。

除了在其定义中列出的属性特定值之外, 本规范中定义的所有属性 也接受 CSS 全局关键字作为其属性值。 为便于阅读,这里没有显式重复列出它们。

1.3. 语言和排版

作者应准确地为其内容标注语言, 以获得最佳排版行为。

许多排版效果会因语言上下文而异。 语言和书写系统的惯例可能影响 断行、连字符断字、两端对齐、字形选择, 以及许多其他排版效果。 在 CSS 中,只有当内容语言已知(已声明)时, 才会应用特定语言的排版定制。 因此, 更高质量的排版要求作者向 UA 传达文档中文本的正确语言上下文。

元素的内容语言 是该元素根据 文档语言的规则被声明为使用的(人类)语言。 注意,元素的内容语言 可能是未知的——例如未标注的内容, 或者处于没有语言标注机制的文档语言中的内容, 会被认为具有未知的内容语言

注:作者可以使用 HTML 中的全局 lang 属性 或 XML 中的通用 xml:lang 属性来声明内容语言。 参见 HTML确定 HTML 元素内容语言的规则, 以及 XML 1.0确定 XML 元素内容语言的规则[HTML] [XML10]

元素被声明使用的内容语言 也标识该元素中所用语言的特定书面形式, 称为内容书写系统。 取决于文档语言用于标识内容语言的能力, 此信息可以是显式的,也可以是隐含的。 参见规范性的附录 F: 识别内容书写系统

注:有些语言拥有不止一种书写系统传统; 在其他情况下,一种语言也可以被转写到外来的书写系统中。 作者应对这些情况进行子标记, 以便 UA 能够作出适当调整。

例如,韩语(ko)可以用 谚文(-Hang)、 汉字(-Hani), 或二者组合(-Kore)书写。 仅用汉字书写的历史文献 不使用词间空格, 其格式更接近现代中文,而不是现代韩语。 换句话说,出于排版目的,ko-Hani 的行为更像 zh-Hant, 而不是 koko-Kore)。

再举一个例子,日语(ja)通常写作 平假名(-Hira)、 片假名(-Kana)和汉字(-Hani) 的组合(-Japn)。 然而,它也可以为了语言学习教材等特殊目的 “罗马字化”为拉丁文字(-Latn), 在这种情况下,它的格式应更像英语而不是日语。

第三个例子是当代蒙古语使用两种文字: 西里尔文(-Cyrl,蒙古国官方使用) 和蒙古文(-Mong,在中国内蒙古更常见)。 它们有非常不同的格式要求: 西里尔文的行为类似拉丁文和希腊文, 而蒙古文则源自阿拉伯文和中文的书写惯例。

1.4. 字符和字母

排版的基本单位是字符。 然而,由于书写系统并不总是像基本英文字母表那样简单, 字符实际是什么取决于 使用该术语的上下文。 例如,在谚文(韩语书写系统)中, 一个音节的每个方块表示 (例如 =Han) 可以被视为一个字符。 然而,该方块符号实际上由多个字母组成,每个字母表示一个音素 (例如 =h=a=n), 而这些也都可以分别被视为一个字符

对于任何给定编码而言,计算机文本编码的基本单位 也称为字符, 并且取决于该编码, 单个编码字符可能对应于 整个预组合的音节字符(例如 ), 也可能对应于单个音素字符(例如 ), 或者对应于更小的单位,例如 基础字形(例如 ) 以及改变它的任何组合标记(例如表示送气的附加笔画)。

反过来,单个编码字符 可以在数据流中表示为一个或多个字节; 而在编程环境中,一个字节有时也称为字符

因此,在需要技术精确性的地方,术语字符相当 含糊。

对于文本布局,我们将把排版 字符单位 称为文本的基本单位。 即使在文本布局领域内, 相关的字符单位也取决于 所执行的操作。 例如,断行和字距调整会对 包含 U+0E33 ำ THAI CHARACTER SARA AM 的泰文字符序列进行不同分段; 或者天城文等文字中的连写辅音行为 可能取决于所用字体。 因此,排版字符表示书写系统中的一个单位——例如 拉丁字母(包括其变音符号)、 谚文音节、 中文表意字符、 缅甸文音节簇——它相对于特定的排版操作 (断行、首字母效果、字距调整、两端对齐、竖排排列等)是不可分割的。

Unicode 标准附录 #29:文本分段 定义了一个称为字素簇的单位, 它近似于排版字符[UAX29] UA 必须使用 UAX29 中定义的扩展字素簇 (而不是旧式字素簇) 作为其排版字符单位的基础。 然而,UA 应根据排版传统的需要 对这些定义进行定制, 因为默认规则并不总是适当或理想——并且预期会根据不同操作 按需以不同方式定制它们。

注:此类定制的规则不属于 CSS 范围。

以下是标准排版实践所要求的一些排版字符单位定制示例:

排版字母 单位 (或就本规范而言的字母) 是属于 Letter 或 Number 通用 类别之一的排版字符单位。 关于如何确定排版 字符单位的 Unicode 属性,参见附录 E: 字符和属性

被元素边界分割的排版字符单位的渲染特性 未定义。 理想情况下,每个组成部分都应 根据其各自元素属性的格式要求进行渲染, 同时保持该排版字符单位整体的正确塑形和定位。 然而,取决于其各部分之间格式差异的性质 以及所用字体技术的能力, 这并不总是可能。 因此,这样的排版字符单位 可能被渲染为属于边界的任一侧, 或者被近似渲染为同时属于两侧。 作者应预先注意,用元素边界分割字素簇 或连字 可能会产生不一致或不希望的结果。

1.5. 文本处理

CSS 建立在 Unicode 之上。 [UNICODE] 支持 Unicode 的 UA 必须遵守 Unicode 核心标准的所有规范性要求, 除非被 CSS 明确覆盖。 基于非 Unicode 文本编码模型实现的 UA 仍然 被期望通过假定适当的映射和类似行为 来满足相同的文本处理要求。

为了确定文本处理中的相邻性 (例如空白处理、文本变换、断行等), 因而通常在本规范中, 中间的内联盒边界和脱离流 元素 必须被忽略。 然而,就文本塑形而言,参见 § 8.7 跨元素 边界的塑形

2. 变换文本

2.1. 大小写变换:text-transform 属性

名称: text-transform
值: none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto
初始值: none
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 不适用
动画类型: 离散

此属性出于样式目的变换文本。 它对底层内容没有影响, 且不得影响纯文本复制粘贴操作的内容。

作者不得依赖 text-transform 来实现语义 目的; 正确的大小写和语义应编码在 源文档文本和标记中。

这些值具有以下含义:

none
无效果。
capitalize
将每个词的第一个排版字母单位,如果为小写,则置为 标题式大小写; 其他字符不受影响。
uppercase
将所有字母置为大写。
lowercase
将所有字母置为小写。
full-width
将所有排版字符单位置为全角形式。 如果某个字符没有对应的全角形式, 则保持原样。 此值通常用于将拉丁字母和数字排版得 像表意字符一样。
full-size-kana
将所有小假名 字符转换为等价的全尺寸假名。 此值通常用于 ruby 注音文本, 在这种场景中,作者可能希望所有小假名都绘制为大假名, 以补偿 ruby 中通常使用的小字号带来的易读性问题。
math-auto
参见 MathML Core § 4.2 The math-auto transform
以下示例将日文文本缩写中使用的 ASCII 字符转换为其全角变体, 使它们像表意字符一样排版和断行:
abbr:lang(ja) { text-transform: full-width; }

注:text-transform 的目的 是允许进行呈现性的大小写变换, 而不影响文档语义。 特别注意,text-transform 大小写操作是有损的, 并且可能扭曲文本含义。 虽然无障碍接口可能希望向用户传达 渲染文本的表观大小写, 但不能依赖被变换后的文本来准确表示 文档的底层含义。

在此示例中, 第一行文本被大写化作为视觉效果。
section > p:first-of-type::first-line {
  text-transform: uppercase;
}

这种效果不能写入源文档, 因为换行的位置取决于布局。 另外,大写化并不反映语义区别, 也不意图影响段落的阅读; 因此它属于呈现层。

在此示例中, ruby 注音文本 的大小是主段落文本的一半, 它们被变换为使用普通大小的假名 来代替小假名
rt { font-size: 50%; text-transform: full-size-kana; }
:is(h1, h2, h3, h4) rt { text-transform: none; /* unset for large text*/ }

注意,虽然这会使此类字母在小字号下更容易看清, 但该变换会扭曲文本: 读者需要在适当位置在脑中替换为小假名——这有点像阅读拉丁铭文时, 其中所有的 “U” 看起来都像 “V”。

例如,如果将 text-transform: full-size-kana 应用于 以下源内容, 注音将读作“じゆう”(jiyū),意思是“自由”, 而不是“じゅう”(jū),意思是“十”, 后者才是被注音的“十”的正确读法和含义。

<ruby><rt>じゅう</ruby>

2.1.1. 映射规则

对于 capitalize,什么构成一个“词”由 UA 决定; 建议使用 [UAX29] 来确定此类词边界 (但并非必须)。 脱离流盒内联盒 边界 不得引入 text-transform 词边界, 并且在确定此类词边界时必须被忽略。

注:作者不能依赖 capitalize 遵循 特定语言的标题式大小写惯例 (例如英语中跳过冠词)。

UA 必须使用 Unicode 字符的完整大小写映射, 包括任何条件性大小写规则, 如 The Unicode StandardDefault Case Algorithms 一节所定义。 [UNICODE] 当且仅当元素的内容 语言 根据文档 语言的规则 是已知的, 那么还必须应用任何适当的特定语言规则。 这些至少包括但不限于 Unicode 的 SpecialCasing.txt 中的特定语言规则。

例如,土耳其语中有两个“i”, 一个带点——“İ”和“i”——另一个不带点——“I”和“ı”。 因此,“I”和“i”之间通常的大小写映射 会被一组不同的映射替换, 分别映射到其无点/有点对应项, 这些对应项在英语中并不存在。 此映射只有在内容语言 是土耳其语 且以其现代基于拉丁字母的书写系统书写 (或使用土耳其语大小写规则的另一种突厥语) 时才必须生效; 在其他语言中, 必须使用 “I” 和 “i” 的通常映射。 因此,此规则在 Unicode 的 SpecialCasing.txt 文件中被有条件地定义。

全角半角形式的定义 可见于 Unicode 标准附录 #11: 东亚宽度[UAX11]全角形式的映射 定义为 取得在其 Decomposition_Mapping 中具有 <wide><narrow> 标记的码点, 这些定义位于 Unicode 标准附录 #44:Unicode 字符数据库[UAX44] 对于 <narrow> 标记, 映射是从该码点到分解结果 (去掉 <narrow> 标记), 而对于 <wide> 标记, 映射是从分解结果 (去掉 <wide> 标记) 回到原始码点。

小假名全尺寸假名的映射定义于 附录 G: 小假名映射

2.2. 在词之间扩展:word-space-transform 属性

名称: word-space-transform
值: none | [ space | ideographic-space ] && auto-phrase?
初始值: none
适用于: 文本
继承:
百分比: 不适用
计算值: 按指定
规范顺序: 按语法
动画类型: 离散

一些语言和书写系统具有 分隔词的替代方式, 要么使用不同的分隔字符, 要么有时完全不使用可见字符。 此属性允许作者将渲染 从一种样式改为另一种样式, 而无需更改标记。

none
此属性没有效果。
space
此元素子文本中的 可扩展 分隔符 被替换为 U+0020 SPACE。
ideographic-space
此元素子文本中的 可扩展 分隔符 被替换为 U+3000 IDEOGRAPHIC SPACE。
auto-phrase
如果内容 语言已知, 且用户代理支持对此语言进行语言学分析, 则用户代理必须检测短语边界。 如果某个词分隔符 字符其他空格 分隔符, 或 U+200B ZERO WIDTH SPACE 字符 尚未出现在该边界处, 则 UA 必须插入一个虚拟可扩展分隔符

如果省略此值, 或者内容 语言未知, 或者用户代理不支持 对该语言进行短语边界检测, 则不存在虚拟可扩展分隔符

就此属性而言, 可扩展 分隔符是以下任意一种:

虚拟 可扩展分隔符是 UA 在文本中检测到的语法边界, 它表示源文档中并未另行出现的可扩展分隔符。 除了用于此属性之外,它没有其他效果。

用户代理不得替换 紧邻强制换行 之前或之后的 可扩展 分隔符 (忽略任何中间的内联盒边界, 以及相关的 margin/border/padding)。

注:因为虚拟可扩展 分隔符 会被放置在参与内联盒边界的最外层元素中, 如果其中一个分隔符会与一个内联盒边界重合, 而其父盒的 使用值word-space-transform: none, 则该特定的虚拟可扩展分隔符不会 被扩展, 因为它会被放置在父盒中。

text-transform 一样,此属性仅出于样式 目的变换文本。 它对底层内容没有影响, 且不得影响纯文本复制粘贴操作的内容。

与成人读物不同,面向幼儿的日文书籍通常在句子 片段之间加入空格, 以便于阅读。 有阅读障碍的人也往往觉得这种样式更易读。

在没有任何特定样式的情况下,下面的句子会按如下所示渲染。

<p>むかしむかし、<wbr>あるところに、<wbr>おじいさんと<wbr>おばあさんが<wbr>すんでいました。

むかしむかし、あるところに、おじいさんとおばあさんがすんでいました。


可以使用以下 css 实现基于短语的间距:

p {
  word-space-transform: ideographic-space;
}

むかしむかし、 あるところに、 おじいさんと おばあさんが すんでいました。


另一种常见变体还会将允许的断行限制在这些短语边界处。 使用相同标记,可以通过以下 css 轻松实现:

p {
  word-break: keep-all;
  word-space-transform: ideographic-space;
}

むかしむかし、 あるところに、 おじいさんと おばあさんが すんでいました。

除了使源代码更易读之外, 在标记中使用 wbr 而不是 U+200B, 还允许作者将分隔符分类到不同组中。

在下面的示例中, wbr 元素在分隔词时要么 不作标记, 要么在同时分隔短语时使用 class p 标记。

<p>らいしゅう<wbr><wbr>じゅぎょう<wbr><wbr class=p>たいこ<wbr><wbr>ばち<wbr><wbr class=p>もって<wbr>きて<wbr>ください。

借助这种方式,不仅可以启用相当常见的基于短语的间距, 还可以启用逐词间距, 这很可能是有阅读障碍的人为了减少歧义 而更偏好的方式, 或者启用其他变体, 例如将基于短语的间距与基于词的换行相结合。

通常渲染

らいしゅうじゅぎょうたいこばちもってきてください。


短语间距
p wbr.p {
  word-space-transform: ideographic-space;
}

らいしゅうじゅぎょうに たいこばちを もってきてください。


词间距
p wbr {
  word-space-transform: ideographic-space;
}

らいしゅう の じゅぎょう に たいこ と ばち を もって きて ください。


短语间距,词换行
p {
  word-break: keep-all;
}
p wbr.p {
  word-space-transform: ideographic-space;
}

らいしゅうじゅぎょうに たいこばちを もってきてください。


词间距和换行
p {
  word-break: keep-all;
}
p wbr {
  word-space-transform: ideographic-space;
}

らいしゅう の じゅぎょう に たいこ と ばち を もって きて ください。

2.3. 操作顺序

当需要应用多个变换时, 它们按以下顺序应用:

  1. word-space-transform
  2. capitalizeuppercaselowercase
  3. full-width
  4. full-size-kana

词间空格变换和 文本变换发生在 § 4.3.1 阶段 I:折叠和 变换之后, 但在 § 4.3.2 阶段 II:修剪和定位之前。 例如,这意味着 full-width 只会在保留的空白中 将空格(U+0020)变换为 U+3000 IDEOGRAPHIC SPACE。

注:附录 A: 文本处理操作顺序所定义, 变换会影响断行和其他格式化操作。

3. 空白和换行:white-space 属性

名称: white-space
值: normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>
初始值: normal
适用于: 文本
继承: 见各单项属性
百分比: 不适用
计算值: 指定的关键字
规范顺序: 不适用
动画类型: 离散

此属性是 white-space-collapsetext-wrap-modewhite-space-trim 的简写。 它指定两件事:

注:此简写组合了可继承属性和 不可继承属性。 如果这是一个问题,请告知 CSSWG。

除非另有规定,任何省略的单项属性 都会被设置为其初始值

下表给出了简写特殊关键字的值 到其等价单项属性值的规范性映射。

white-space white-space-collapse text-wrap-mode white-space-trim
normal collapse wrap none
pre preserve nowrap none
pre-wrap preserve wrap none
pre-line preserve-breaks wrap none

注:在某些情况下, 保留的空白其他空格分隔符 在行尾时可以悬挂; 这会影响它们是否参与固有 尺寸测量。

以下资料性表格总结了 各种 white-space 值的行为:

换行符 空格和制表符 文本换行 行尾空格 行尾其他空格分隔符
normal 折叠 折叠 换行 移除 悬挂
pre 保留 保留 不换行 保留 不换行
nowrap 折叠 折叠 不换行 移除 悬挂
pre-wrap 保留 保留 换行 悬挂 悬挂
break-spaces 保留 保留 换行 换行 换行
pre-line 保留 折叠 换行 移除 悬挂

4. 空白处理和控制字符

文档的源文本通常包含 与最终渲染无关的格式: 例如, 为方便编辑而将源文本分割成片段 (行), 或添加空白字符 例如制表符空格 来缩进源代码。 CSS 空白处理允许作者 控制对此类格式的解释: 在渲染文档时保留它或将其折叠掉。 CSS 中的空白处理 (由 white-space-collapsewhite-space-trim 属性控制) 仅为渲染解释空白字符: 它对底层文档数据没有影响。

注:取决于文档语言, 片段可以由特定的换行序列分隔 (例如换行符或 CRLF 对), 或由某种其他机制定界, 例如 SGML RECORD-STARTRECORD-END 记号。

对于 CSS 处理, 每个由文档语言定义的“分段符”或“换行序列”——如果没有定义,则为文本中的每个换行符 (U+000A)——都被视为一个分段符, 随后按照 white-space 属性的规定解释为渲染结果。

对于 HTML, 换行会被规范化为换行符(U+000A) 以便在 DOM 中表示, 因此当 HTML 文档表示为 DOM 树时, 每个换行符(U+000A) 都会被视为一个分段符[HTML] [DOM]

注:在大多数常见的 CSS 实现中, HTML 不会被直接设置样式。 相反,它会被处理成 DOM 树, 随后再设置样式。 与 HTML 不同, DOM 不会赋予回车符(U+000D)任何特定含义, 因此它们不会被视为分段 符。 如果回车符(U+000D)通过 HTML 解析以外的方式 被插入 DOM, 则它们会按下文定义处理。

注:文档解析器可能 不仅会规范化任何分段 符, 还会根据标记规则折叠其他空格字符 或以其他方式处理空白。 因为 CSS 处理发生在解析阶段之后, 所以无法为了样式恢复这些字符。 因此,下文规定的某些行为 可能会受到这些限制影响, 并且可能取决于用户代理。

注:完全由可折叠空白组成的匿名块 会从渲染树中移除。 因此,块级元素周围的任何此类空白 都会被折叠掉。 参见 CSS 2 § 9.2.2.1 Anonymous inline boxes[CSS2]

控制字符(Unicode 类别 Cc)——除了制表符(U+0009)、 换行符(U+000A)、 回车符(U+000D) 以及形成分段 符的序列之外——必须渲染为可见字形, 如果在字体中找到的字形不可见,则 UA 必须合成该字形, 并且必须在其他方面将其视为 Other Symbols(So通用类别 和 Common 文字的任何其他字符。 UA 可以使用字体中专门为该控制字符提供的字形, 替换为 Control Pictures 块中对应符号所提供的字形, 生成其码点值的视觉表示, 或使用其他方法提供适当的可见字形。 按 Unicode 要求, 不支持的 Default_ignorable 字符 必须在文本渲染中被忽略。 [UNICODE]

回车符(U+000D)在所有方面都被等同于空格(U+0020)处理。

注:对于 HTML 文档, 源代码中存在的回车符 会在解析阶段转换为换行符 (参见 HTML § 13.2.3.5 Preprocessing the input stream 以及 Infranormalize newlines 的定义, 因而不会作为 U+000D CARRIAGE RETURN 出现在 CSS 中。 [HTML] [INFRA]) 然而,当使用转义序列(&#x0d;)编码时, 该字符被保留——并且上述规则可被观察到。

4.1. 空白折叠:white-space-collapse 属性

本节仍在 讨论中,未来草案中可能会发生变化。

名称: white-space-collapse
值: collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces
初始值: collapse
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

此属性指定 空白 是否以及如何被折叠。 这些值具有以下含义, 必须根据 空白处理规则解释:

collapse
此值指示用户代理将空白序列折叠 为单个字符 (或在某些情况下,没有字符)。
preserve
此值阻止用户代理折叠空白序列。 分段符(例如 换行符) 被保留为强制换行
preserve-breaks
collapse 一样, 此值会折叠连续的空白字符, 但会将源中的分段 符保留为强制换行
preserve-spaces
此值阻止用户代理 折叠空白序列, 并将制表符分段符转换为空格。 (此值旨在表示 SVG 中 xml:space="preserve" 的行为。)
break-spaces
其行为与 preserve 相同, 除了:

注:此值并不保证 绝不会因为空白而发生溢出: 例如,如果行长度短到 连单个空白字符都放不下, 溢出就是不可避免的。

discard
此值指示用户代理“丢弃” 元素中的所有空白。

这是否保留 换行机会?还是不保留?我们是否需要一个不同的 "hide" 值? 如果它保留换行机会, 也许应该将其替换为一个 word-space-transform 值?

未因空白处理而被移除 或折叠的空白 称为保留的空白

以下样式规则实现 MathML 的空白处理:

@namespace m "http://www.w3.org/1998/Math/MathML";
m|* {
  white-space-collapse: discard;
}
m|mi, m|mn, m|mo, m|ms, m|mtext {
  white-space-trim: discard-inner;
}

4.2. 空白修剪:white-space-trim 属性

名称: white-space-trim
值: none | discard-before || discard-after || discard-inner
初始值: none
适用于: 内联盒块容器
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

此属性允许作者指定 盒的开头和结尾处的修剪行为。 这些值具有以下含义:

discard-before
此值指示 UA 折叠元素开始处 紧前方的所有可折叠空白。
discard-after
此值指示 UA 折叠元素结束处 紧后方的所有可折叠空白。
discard-inner
对于块容器,此值指示 UA 丢弃 元素开头处直到并包括 元素中第一个非空白字符之前的最后一个分段符为止的 所有空白, 以及丢弃元素结尾处从元素中最后一个 非空白字符之后的第一个分段符开始的 所有空白。 对于其他元素,此值指示 UA 丢弃 元素开头和结尾处的所有空白。

注:使用 white-space-trim 丢弃文档空白 可能会改变文本中软换行机会出现的位置。

以下样式规则将 DT 元素渲染为逗号分隔列表, 即使它们在源文档中被编码在不同行上:

dt { display: inline; }
dt + dt:before { content: ", "; white-space-trim: discard-before; }

以下样式规则会移除 与预格式化块的开始/结束标签相邻的源格式化空白, 但不会移除应用于元素实际内容的 任何缩进或交错空白:

pre { white-space: pre; white-space-trim: discard-inner; }
这会使以下两个源代码片段:
<pre>

  some
preformatted

  text

</pre>
<pre>  some
preformatted

  text</pre>
渲染为相同的结果:
  some
preformatted

  text

如果我们改为将其应用于内联元素:

span { white-space: normal; white-space-trim: discard-inner; }
start[<span>

  some
inline
  text

</span>]end
start[<span>  some
inline
  text</span>]end
这会指示 UA 丢弃元素实际内容之前 所有前导/尾随空白:
start[some inline text]end

white-space-trim 的空白处理 发生在 § 4.3.1 阶段 I:折叠和变换之前。

4.3. 空白处理规则

除非另有规定, CSS 中的空白处理仅影响 文档空白字符空格(U+0020)、制表符(U+0009),以及分段符

注:被视为文档空白 (文档内容的一部分) 的字符集合与被视为语法空白 (CSS 语法的一部分) 的字符集合不一定相同。 然而,由于二者都包括空格(U+0020)、制表符(U+0009)和换行符(U+000A), 大多数作者不会注意到任何差异。

除了空格(U+0020) 和不换行空格(U+00A0)之外, Unicode 还定义了若干额外的空格分隔符字符。 [UNICODE] 在本规范中, Unicode 通用类别 Zs 中 除空格(U+0020) 和不换行空格(U+00A0)之外的所有字符 统称为 其他空格 分隔符

4.3.1. 阶段 I:折叠和变换

注:white-space-trim 会在 此阶段之前被纳入考虑。

对于内联格式化上下文中的每个内联 (包括匿名内联; 参见 CSS 2 § 9.2.2.1 Anonymous inline boxes [CSS2]), 在断 行双向 重排之前, 空白字符按如下方式 处理, 并忽略双向 格式化字符 (具有 Bidi_Control 属性的字符 [UAX9]), 就像它们不存在一样:

以下示例说明了 空白折叠与双向性的相互作用。 考虑以下标记片段,特别注意空格 (使用不同的背景和边框以便强调和识别):
<ltr>A <rtl> B </rtl> C</ltr>

其中 <ltr> 元素表示从左到右的嵌入, 而 <rtl> 元素表示从右到左的嵌入。 如果 white-space 属性被设置为 normal, 空白处理模型将产生以下结果:

这会留下两个空格, 一个位于从左到右嵌入级别中的 A 之后, 另一个位于从右到左嵌入级别中的 B 之后。 随后文本会根据 Unicode 双向算法排序, 最终结果为:

A  BC

注意,A 和 B 之间会有两个空格, 而 B 和 C 之间没有空格。 最好通过将空格放在元素外部 而不是仅放在开始和结束标签内部来避免这种情况, 并且在可行时, 依赖隐式双向性而不是显式嵌入级别。

4.3.2. 阶段 II:修剪和定位

然后,渲染整个块。 内联内容被布局, 并考虑双向重排, 以及由 text-wrap-modetext-wrap-style 属性指定的换行。 当每一行被布局时,

  1. 行首的一段可折叠空格序列 会被移除。
  2. 如果制表符大小为零, 保留的 制表符不会被渲染。 否则,每个保留的制表符会被渲染 为一次水平偏移,使下一个字形的起始边 与下一个制表位对齐。 如果此距离小于 0.5ch, 则改用随后的制表位制表 位出现在 从保留的制表符最近的块容器祖先的起始内容边 起算的 制表符大小的倍数位置。 制表符大小tab-size 属性给出。

    注:参见 Unicode 关于制表(U+0009)如何与双向性相互作用的规则[UAX9]

  3. 行尾的一段可折叠空格序列 会被移除, 任何尾随的 U+1680   OGHAM SPACE MARK 也会被移除, 前提是其 white-space-collapse 属性为 collapsepreserve-breaks

    注:由于 Unicode Bidirectional Algorithm 规则 L1, 在双向重排之前 位于行尾的一段可折叠空格序列 在重排之后也会位于行尾。 [UAX9] [CSS-WRITING-MODES-4]

  4. 如果在行尾仍有任何空白其他空格 分隔符 和/或保留的制表符序列 (在双向重排之后 [CSS-WRITING-MODES-4]):

    对于 white-space-collapse: preserve-spaces, 这里应当发生什么?

此示例展示了在带有强制换行的行尾 有条件地悬挂空白 如何与行首形成对称。 添加下划线有助于可视化这些空格。
p {
  white-space: pre-wrap;
  width: 5ch;
  border: solid 1px;
  font-family: monospace;
  text-align: center;
}
<p> 0 </p>

上面的示例会渲染如下:

0

由于最后一个空格位于强制 换行之前 且不会溢出, 因此它不会悬挂, 居中也会按预期工作。

此示例说明了 在没有强制换行的行尾悬挂空格 与在有强制换行的行尾有条件地 悬挂空格之间的区别。 添加下划线有助于可视化这些空格
p {
  white-space: pre-wrap;
  width: 3ch;
  border: solid 1px;
  font-family: monospace;
}
<p> 0 0 0 0 </p>

上面的示例会渲染如下:

0
0 0
0

如果添加 p { text-align: right; }, 结果将如下:

0
0 0
0

由于没有强制换行的行尾的保留的空格必须悬挂, 因此在文本对齐期间放置行内其余内容时不会考虑它们。 当向结束边对齐时, 这意味着任何此类空格都会溢出, 并且不会阻止该行其余内容与行边缘齐平。 另一方面, 带有强制换行的行尾的保留空格会有条件地 悬挂。 由于在此示例中最后一行末尾的空格不会溢出, 因此它不会悬挂, 从而会在文本对齐期间被考虑。

在以下示例中, 任何行都没有足够空间容纳行尾空格, 因此它们在所有行上都会悬挂: 没有强制换行的那一行上的空格会悬挂,因为它必须如此; 有强制换行的那一行上的空格也会悬挂, 因为它有条件地 悬挂并发生溢出。 添加下划线有助于可视化这些空格。
p {
  white-space: pre-wrap;
  width: 3ch;
  border: solid 1px;
  font-family: monospace;
}
<p>0 0 0 0 </p>
0 0
0 0

最后一行不会在最后一个 0 之前换行, 因为在测量该行内容是否适合时, 不会考虑那些有条件地悬挂的字符。

4.3.3. 分段符变换规则

white-space-collapse 不是 collapse 时, 分段符不是可折叠的。 对于除 collapsepreserve-spaces (会将它们转换为空格) 之外的值, 分段符会改为转换为保留的换行符 (U+000A)。

white-space-collapsecollapse 时, 分段符可折叠的, 并按如下方式折叠:

  1. 首先,任何紧跟另一个可折叠分段符之后的 可折叠分段符 会被移除。
  2. 然后,任何剩余的分段 符 要么被转换为空格(U+0020), 要么被移除, 具体取决于该断点前后的上下文。 此操作的规则在本级中由 UA 定义。

    我们是否应该 在第 4 级中定义这一点?

    注:在评估此上下文之前, 空白处理规则已经 移除了分段符 周围的任何制表符空格

分段符变换规则 (以及一般的空白折叠) 的目的,是将为了让文档源代码更易处理 而分成片段的文本 “取消换行”。 在使用词分隔符的语言中,例如英语和韩语, “取消换行”要求用一个空格连接两行。
Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.

Here is an English paragraph that is broken into multiple lines in the source code so that it can be more easily read and edited in a text editor.

在英语中消除换行 需要在其位置保留一个空格

在没有词分隔符的语言中,例如中文, “取消换行”要求将两行连接起来,中间不插入空格。

這個段落是那麼長,
在一行寫不行。最好
用三行寫。

這個段落是那麼長,在一行寫不行。最好用三行寫。

在中文中消除换行 需要消除任何中间的空白

分段符变换规则可以使用相邻上下文, 将分段符转换为空格 或将其完全消除。

注:从历史上看,HTML 和 CSS 会无条件地 将分段符转换为 空格, 这阻止了以中文等语言创作的内容 在源代码中进行断行。 因此,UA 启发式规则在决定何处丢弃分段符时需要保持保守, 即便它们努力改进对此类语言的支持。

4.4. 制表符大小:tab-size 属性

名称: tab-size
值: <number [0,∞]> | <length [0,∞]>
初始值: 8
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的数字或绝对长度
规范顺序: 不适用
动画类型: 按计算值类型

此属性确定用于渲染保留的制表符字符(U+0009)的制表符 大小<number> 表示 作为该保留的制表符最近的块容器祖先的空格字符(U+0020)前进宽度的倍数 的度量, 包括其关联的 letter-spacingword-spacing。 不允许负值。

5. 文本换行

当内联级内容被布局到多行中时,它会跨行盒断开。 这样的断开称为断 行。 当一行由于显式断行控制 (例如保留的换行字符) 或由于块的开始或结束而断开时, 它就是强制换 行。 当一行由于内容换行 而断开时 (即 UA 为了使内容适应度量宽度而创建非强制断行时), 它就是软换行 断点。 将内联级内容断成多行的过程称为断行

换行只会在允许的断点处执行, 该断点称为软换行 机会。 当启用换行时(参见 white-space), 如果存在软换行机会, UA 必须通过在该机会处换行 来尽量减少行中溢出的内容量。 有效的软换行机会取决于 内容语言 和书写系统, 以及控制它们的 CSS 属性, 参见 § 6 断行和词边界

文本允许在哪里换行 由断行规则和控制控制; 它是否允许换行, 以及一行内多个软换行机会如何排序优先级, 由 text-wrap-modetext-wrap-stylewrap-beforewrap-afterwrap-inside 属性控制。

5.1. 决定是否换行:text-wrap-mode 属性

名称: text-wrap-mode
值: wrap | nowrap
初始值: wrap
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

此属性指定内联级 内容 是否在非强制的软换行 机会换行

注:此属性同时是 单项属性, 属于 white-spacetext-wrap

可能的值:

wrap
为了尽量减少内联轴溢出, 行可以在生效的断行规则所确定的允许软换行 机会换行

注:关于软换行机会的规则和约束的更多信息, 参见 § 6.5 断行细节

nowrap
行只在强制换行处断开; 不适合块容器宽度的内容会从其中溢出。

无论 text-wrap-mode 的值如何, 保留的分段符, 以及任何具有 BKCRLFNL 断行类别的 Unicode 字符, 都必须被视为强制 换行[UAX14]

注:此类强制换行 的双向性影响由 Unicode 双向 算法定义。 [UAX9]

5.2. 控制盒内断行:wrap-inside 属性

名称: wrap-inside
值: auto | avoid
初始值: auto
适用于: 内联盒
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散
auto
行可以在盒内的允许断点处断开, 具体由生效的断行规则决定。
avoid
盒内的断行会被抑制: 只有当该行没有其他有效断点时, UA 才可以在盒内断行。 如果文本发生断行, 断行限制会像 auto 一样得到遵守。

如果具有 avoid 的盒相互嵌套, 且 UA 必须在这些盒内断行, 则必须先使用外层盒中的断点, 才能使用内层盒中的断点。

5.2.1. 在呈现页脚时使用 'wrap-inside: avoid' 的示例

可以设置断点的优先级, 以反映预期的文本分组。

给定以下规则

footer { wrap-inside: avoid; }
venue { wrap-inside: avoid; }
date { wrap-inside: avoid; }
place { wrap-inside: avoid; }

以及以下标记:

<footer>
<venue>27th Internationalization and Unicode Conference</venue>
&#8226; <date>April 7, 2005</date> &#8226;
<place>Berlin, Germany</place>
</footer>

在较窄的窗口中,页脚可以断为

27th Internationalization and Unicode Conference •
April 7, 2005 • Berlin, Germany

或者在更窄的窗口中断为

27th Internationalization and Unicode
Conference • April 7, 2005 •
Berlin, Germany

但不能断为

27th Internationalization and Unicode Conference • April
7, 2005 • Berlin, Germany

5.3. 控制盒之间的断行:wrap-before/wrap-after 属性

名称: wrap-before, wrap-after
值: auto | avoid | avoid-line | avoid-flex | line | flex
初始值: auto
适用于: 内联级盒和弹性项目
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

这些属性指定对断行中的断行机会 (以及弹性行断行 [CSS3-FLEXBOX]) 的修改。 可能的值:

auto
行可以在盒之前和之后的允许断点处断开, 具体由生效的断行规则决定。
avoid
紧邻盒之前/之后的断行会被抑制: 只有当该行 没有其他有效断点时, UA 才可以在那里断行。 如果文本发生断行, 断行限制会像 auto 一样得到遵守。
avoid-line
avoid 相同, 但仅适用于行断行。
avoid-flex
avoid 相同, 但仅适用于弹性行断行。
line
如果该盒是内联级盒, 则在该盒之前/之后立即强制断行。
flex
如果该盒是多行弹性容器中的弹性项目, 则在该盒之前/之后立即强制一个弹性行断行。

内联级盒上的强制断行会向上传播, 经过任何父内联盒, 其方式与块级盒上的强制断裂 在同一分片上下文中 经过任何父块盒 向上传播的方式相同。 [CSS3-BREAK]

5.4. 选择如何换行:text-wrap-style 属性

名称: text-wrap-style
值: auto | balance | stable | pretty | avoid-orphans
初始值: auto
适用于: 建立内联格式化上下文块容器
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

CSSWG 正在为 avoid-orphans 寻找一个更好的名称。

当允许换行时 (参见 text-wrap-mode), 此属性会在几种换行方式之间进行选择, 在速度、质量、布局风格或稳定性之间权衡。 它不会改变哪些软换行机会存在, 而是改变用户代理如何在它们之间进行选择。 可能的值:

auto
用于选择在哪个软 换行机会处断行的确切算法由 UA 定义。 该算法在作出断行决定时可以考虑多行。 UA 可以偏向速度而非最佳布局。 UA 不得尝试像 balance 那样使所有行 (包括最后一行)均匀。 此值选择 UA 首选的(或最具 Web 兼容性的) 换行算法。
balance
选择断行位置以平衡 每个行盒中的剩余(空)空间, 如果可能比 auto 有更好的平衡。 这应避免改变——并且在 5 行或更少的情况下不得改变—— 如果 text-wrap 被设置为 auto 时 该块将包含的行盒数量。

注:不过,行盒的高度仍可能 因同一行中出现的内容发生变化而改变。

要考虑的剩余空间 是在放置浮动和内联内容之后、 但在因文本两端对齐进行任何调整之前所剩余的空间。 当每个行盒中剩余空间的平均内联尺寸的标准差 在该块内被减小时 (包括以强制换行结束的行), 行盒即为平衡。

强制换行 分隔的行组会分别处理。 如果元素受到 line-clamp 影响, 则先应用截断效果, 然后平衡剩余的行。

确切算法由 UA 定义。

如果要平衡的行数超过十行, UA 可以将此值视为 auto

stable
指定在作出断行决定时不应考虑 后续行上的内容, 以便在编辑文本时,光标之前的任何内容 保持稳定; 否则等同于 auto
pretty
指定 UA 偏向更好的布局而非速度, 并预期在作出断行决定时考虑多行。 否则等同于 auto

用户代理可以尝试避免过短的最后一行等事项, 类似于 avoid-orphans, 但它还应以其他方式改进布局。 精确的改进集合取决于用户代理, 可能包括: 减少行长之间的差异; 避免排版中的河流; 对不同类别的软换行机会连字符断字 机会两端对齐机会进行优先级排序; 避免在太多连续行上使用连字符断字……

所需计算可能较为昂贵, 尤其是在应用于大量文本时。 鼓励作者在使用 text-wrap-style: pretty 时 评估其对性能的影响, 并可能在最重要的地方有选择地使用它。
avoid-orphans
指定 UA 避免过短的最后一行, 并预期在作出断行决定时 考虑不止一行 (例如,避免为了“修复”孤行 而让前一行变得太短)。 当改进最后一行会使某些前面的行 明显失衡时,用户代理可以决定不改进最后一行。 如果其他布局改进会带来显著性能成本, 用户代理不应尝试在 auto 之外改进布局的其他方面。

注:在西文排版中,“orphan”可以 指段落最后一行中的单个词。 然而,并非所有语言或书写系统都在词边界处换行, 即使在会这样做的语言中, 最后一行中的几个很短的词也仍可能是不理想的, 尤其是在可用内联空间较长时。 因此,本规范并不严格定义 只有由单个词组成的行才算过短, 而是让用户代理来判断什么是过短。

注:另请参见 orphans 属性,它用于控制分片 以及“orphans”的另一种排版含义。

例如,在给定的行长下,以下文本会换行为最后一行只有一个词, 这可能会被判断为过短。
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα
πολλὰ πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον
ἔπερσεν.
应用 text-wrap-style: avoid-orphans 可能会产生类似 以下的结果, 可以说更令人满意:
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς
μάλα πολλὰ πλάγχθη, ἐπεὶ Τροίης ἱερὸν
πτολίεθρον ἔπερσεν.
然而,以下片段更加棘手:
Circumnavigating
the Mississippi
river
尝试通过提前换行上一行来使最后一行不那么短, 会得到以下结果:
Circumnavigating
the
Mississippi river
虽然最后一行确实不再短, 但倒数第二行会显得很难看。 在这种情况下,用户代理被期望 即使设置了 text-wrap-style: avoid-orphans, 也优先采用第一种渲染。

注:auto 值通常会 映射到 Web 浏览器快速的传统断行方式, 该方式迄今使用的是 first-fit/greedy 算法, 这常常会产生次优结果。 UA 可以在此默认值下试验更好的断行算法, 但由于最优结果通常需要更多时间, prettyavoid-orphans 作为可选项提供, 以便花更多时间获得更好的结果。 这两个值都旨在用于正文文本, 在正文文本中最后一行预期会比平均行略短, 但 avoid-orphans 旨在避免 过短的最后一行,同时保持性能, 而 pretty 可以牺牲更多速度 以追求更好的布局; balance 值旨在用于标题和图表标题, 在这些场景中,人们往往更偏好等长文本行; 而 stable 旨在用于 当前可编辑或很可能切换为可编辑的部分。

参见线程。 此议题关于要求行具有最小长度。 常见度量似乎包括

建议的值空间是 match-indent | <length> | <percentage> (以 Xch 作为示例来说明该用例)。 或者,<integer> 也可以实际计数字符。

尚不清楚这将如何与文本平衡(上文)交互; 早期的一个提案曾让二者成为同一属性 (其中 100% 表示完全平衡)。

有人请求基于词的限制,但由于这实际上 取决于词的长度,基于字符会更好。

5.5. 联合换行控制:text-wrap 简写属性

名称: text-wrap
值: <'text-wrap-mode'> || <'text-wrap-style'>
初始值: wrap
适用于: 见各单项属性
继承: 见各单项属性
百分比: 见各单项属性
计算值: 见各单项属性
规范顺序: 按语法
动画类型: 见各单项属性

此属性是 text-wrap-modetext-wrap-style 属性的简写。 任何省略的单项属性都会被设置为其初始值

6. 断行和词边界

在大多数书写系统中, 在没有连字符断字的情况下,软换行机会通常只出现在词边界处。 许多这样的系统(例如使用拉丁字母书写的英语) 使用空格或标点来显式 分隔词, 而软换行机会可以通过这些 字符识别。

然而,泰文、老挝文和高棉文等文字 不使用空格或标点来分隔词。 虽然零宽空格(U+200B)可在这些文字中用作显式词分隔符, 但这种做法并不常见。 因此,需要词汇资源 才能在此类文本中正确识别软换行机会

在其他一些书写系统中, 尤其是爪哇文和巴厘文等婆罗米系文字, 软换行 机会基于正字法音节边界, 而不是词边界。 虽然正字法音节断行 不依赖内容语言 或词汇资源, 但仍然需要分析文本 以寻找断行机会。

在其他书写系统中,例如中文(以及日文、彝文,有时还有韩文), 每个音节往往对应一个排版字母单位, 因而断行惯例允许行在几乎任何地方断开, 除了某些字符组合之间。 此外,这些限制的严格程度 会随排版样式而变化。

虽然 CSS 并不完整定义软换行机会出现的位置, 但提供了一些控制以区分常见变体:

注:Unicode 标准附录 #14:Unicode 断行 算法 为 Unicode 中所有文字的断行定义了 基线行为, 预期还会进一步定制。 [UAX14] 关于断行惯例的更多信息, 可见于日文的 日文文本 布局需求 [JLREQ]日文文档格式化规则 [JIS4051], 中文的中文文本布局需求 [CLREQ]标点符号用法 [ZHMARK]。 另请参见 国际化工作组语言支持索引, 其中包含关于其他语言的更多信息。 [TYPOGRAPHY] 如能提供关于其他适当参考资料的任何指导, 将不胜感激。

6.1. 字母断行规则:word-break 属性

名称: word-break
值: normal | break-all | keep-all | manual | auto-phrase | break-word
初始值: normal
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 不适用
动画类型: 离散

此属性指定“词”之间以及“词”内部的软换行机会, 即文本行在何处“正常”且允许断开。 它侧重于字母之间的断开, 并不定义空白其他空格 分隔符 是否以及如何产生软换行 机会 (尽管 auto-phrase 可能会抑制其中一些), 也不定义标点周围的机会。 (关于影响标点和小假名的控制,参见 line-break。)

具体而言, word-break 控制相邻排版字母单位之间 是否通常存在软换行机会, 为此目的(仅限于此),会将属于 NUALAI、 或 ID Unicode 断行类别的非字母排版字符 单位 视为排版字母单位[UAX14]

例如, 在某些 CJK 排版样式中, 英语单词允许在任意两个字母之间断开, 而不仅仅是在空格或连字符断字点处; 这可以通过 word-break:break-all 启用。
一小段日文文本中包含英文。
			          单词 'caption' 在两行之间被断成 'capt' 和 'ion'。
嵌入日文中的英文文本 在单词中的任意位置断开的示例。

另一个例子是,韩语有两种断行样式: 在任意两个韩文音节之间断开(word-break: normal), 或像英语一样,主要在空格处断开(word-break: keep-all)。

각 줄의 마지막에 한글이 올 때 줄 나눔 기
준을 “글자” 또는 “어절” 단위로 한다.
각 줄의 마지막에 한글이 올 때 줄 나눔
기준을 “글자” 또는 “어절” 단위로 한다.

埃塞俄比亚文同样有两种断行样式, 要么只在词 分隔符处断开(word-break: normal), 要么也允许在词内的字母之间断开(word-break: break-all)。

ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡
በማዕረግ፡ወብሕግ።ቦሙ፡ኅሊና፡ወዐቅል፡
ወይትጌበሩ፡አሐዱ፡ምስለ፡አሀዱ፡
በመንፈሰ፡እኍና።
ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡በማ
ዕረግ፡ወብሕግ።ቦሙ፡ኅሊና፡ወዐቅል፡ወይትጌ
በሩ፡አሐዱ፡ምስለ፡አሀዱ፡በመንፈሰ፡እኍና።

注:若只想在溢出情况下启用额外断行机会, 参见 overflow-wrap

这些值具有以下含义:

normal
词按照其惯常规则断开, 如上文所述。 韩语通常表现出两种不同的行为, 它允许在任意两个连续的韩文/汉字之间断开。 对于同样表现出两种不同行为的埃塞俄比亚文, 不允许在词内进行此类断开。

某些书写系统需要特定处理, 才能获得惯常期望的软换行机会, 如 § 6.1.1 分析式词断行中所述。

break-all
允许在“词”内断行: 具体而言, 除了 normal 允许的软换行机会之外, 任何排版字母单位 (以及任何解析为 NU(“数字”)、 AL(“字母”)、 或 SA(“东南亚”) 断行类别 [UAX14]排版字符单位) 都会改为被视为 ID (“表意字符”) 用于断行目的。 不应用连字符断字。

注:此值不会影响 标点字符周围是否存在软换行机会。 若要允许在任何位置断开,参见 line-break: anywhere

注:此选项启用埃塞俄比亚文的另一种常见 行为。 它也常用于文本主要由 CJK 字符组成、 只包含较短非 CJK 摘录的场景, 并希望文本在每一行上分布得更好。

keep-all
禁止在“词”内断行: 会抑制排版字母单位之间 (或属于 NUALAI、 或 ID Unicode 断行类别 [UAX14] 的其他排版字符单位之间) 的隐式软 换行机会, 即禁止在此类字符对之间断开 (无论 line-break 设置为何,除 anywhere 之外), 除非机会来自 § 6.1.1.1 词汇断行。 否则此选项等同于 normal。 在这种样式下,CJK 字符序列不会断开。

注:这是韩语的另一种常见行为 (韩语在词之间使用空格), 也适用于混合文字文本,其中 CJK 片段混入 另一种使用空格分隔的语言中。

manual
行为与 normal 相同, 但 不得执行§ 6.1.1.1 词汇断行。 具体而言, 在 [UAX14] 中具有 SA 类别的排版字符单位 必须被视为具有 AL 类别 (即假设 line-break 的值不是 anywhere, 此类字符对之间不存在软换行机会)。

注:此值不会影响 巴厘文等语言中词内基于音节的软换行机会。 (关于此类书写系统的一些讨论,参见 § 6.1.1.2 正字法断行。)

或者, 此值可以基于 keep-all 而不是 normal。 另一种变体是将此行为 与 keep-all 合并。

注:一些东南亚语言经常被用户代理误检测。 使用 word-break: normal 时, 它们随后会应用不适当的特定语言逻辑 来寻找换行机会, 并将这些机会放在不合适的位置。

例如, 除泰语之外的许多语言也使用泰文字母书写, 若像处理泰语那样对其断行, 通常会产生不充分——甚至可能令人困惑——的结果。

发生这种情况时, 此值允许作者关闭 用户代理为 word-break: normal 内置的词边界检测, 以便他们可以手动标记文本来指示换行机会, 并获得合理结果。

使用此值的作者 被期望手动指示东南亚语言的词边界, 方法是使用 wbr 或 U+200B。 否则,将不存在软换行机会, 文本可能会溢出。
auto-phrase
行为与 normal 相同, 但 此值指示用户代理执行特定语言的内容分析, 以优先保持自然短语(由多个词组成)在一起。

如果元素的内容 语言未知, 或者用户代理不知道如何为该特定语言 检测短语边界, 则此值必须表现为 normal。 否则, 用户代理应检测短语边界, 并抑制每个短语内部的软换行机会

无论内容语言 和对短语边界检测的支持如何, 连字符断字机会都会被抑制, 就像指定了 hyphens: none 一样。

注:为某种语言设计的词边界检测系统 是否适合该语言的部分或全部方言,这在一定程度上是主观的, 本规范将其留给用户代理自行决定。 即使某个检测系统无法处理 某种特定方言的所有细微差别, 只要该检测大多数时候能正确识别词边界, 声称支持也可能是合理的。 然而,如果用户代理声称支持某些语言, 但它无法检测出大多数词边界 或错误率很高, 则会损害作者和用户的利益。
如果用户代理有一个用于粤语的词边界检测系统, 但该系统不适合更广泛的中文语言集合, 那么 auto-phrase 应对标记为 lang=yuelang=zh-yuelang=zh-HK 的内容产生效果, 但不应对 lang=zhlang=zh-Hant 产生效果。

然而,如果用户代理支持适用于一般中文的 通用词边界检测系统, 那么 auto-phrase 应对 使用宽泛 lang=zh 特征标记的内容 产生效果, 也应对任何更具体的标记产生效果, 例如 lang=zh-yuelang=zh-Hant-HKlang=zh-Hans-SGlang=zh-hak

以与特定类别字母相同方式断行的符号 会受到与这些字母相同的影响。

这里有一段混合文字示例文本:
这是一些汉字 and some Latin و کمی خط عربی และตัวอย่างการเขียนภาษาไทย በጽሑፍ፡ማራዘሙን፡አንዳንድ፡

断点按如下方式确定(用“·”表示):

word-break: normal
这·是·一·些·汉·字·and·some·Latin·و·کمی·خط·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย·በጽሑፍ፡·ማራዘሙን፡·አንዳንድ፡
word-break: break-all
这·是·一·些·汉·字·a·n·d·s·o·m·e·L·a·t·i·n·و·ﮐ·ﻤ·ﻰ·ﺧ·ﻁ·ﻋ·ﺮ·ﺑ·ﻰ·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย·በ·ጽ·ሑ·ፍ፡·ማ·ራ·ዘ·ሙ·ን፡·አ·ን·ዳ·ን·ድ፡
word-break: keep-all
这是一些汉字·and·some·Latin·و·کمی·خط·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย·በጽሑፍ፡·ማራዘሙን፡·አንዳንድ፡

日语通常排版为允许在词内的音节之间断行。 然而,有时更希望抑制这些换行机会, 只允许在某些句子片段的末尾换行。 这最常用于非常短的文本, 例如标题以及表格或图形标题。

这可以通过手动标记允许的换行点来实现, 方法是使用 wbr 或 U+200B ZERO WIDTH SPACE, 并使用 word-break: keep-all 抑制其他换行点。

或者, 在支持日语短语边界检测的用户代理中, 可以通过使用 word-break: auto-phrase 自动达到相同结果 (假设已指定内容 语言)。

示例标记和样式规则 预期渲染 你的浏览器中的结果
<h1>
窓ぎわの<wbr>トットちゃん
</h1>
h1 {
  word-break: normal;
}
窓ぎわのトッ
トちゃん
窓ぎわのトットちゃん
<h1>
窓ぎわの<wbr>トットちゃん
</h1>
h1 {
  word-break: keep-all;
}
窓ぎわの
トットちゃん
窓ぎわのトットちゃん
<h1 lang=ja>
窓ぎわのトットちゃん
</h1>
h1 {
  word-break: auto-phrase;
}
窓ぎわの
トットちゃん
窓ぎわのトットちゃん

用户代理不得 因此属性的任何值而 抑制以下软 换行机会

word-break 的效果 会在计算固有 尺寸时被纳入考虑。

为了兼容旧内容, word-break 属性还支持 一个已弃用的 break-word 关键字。 指定时,它具有与 word-break: normaloverflow-wrap: anywhere 相同的效果, 无论 overflow-wrap 属性的实际值是什么。

6.1.1. 分析式词断行

6.1.1.1. 词汇断行

为了为东南亚语言提供预期的 normal 行为, 在 [UAX14] 中具有 SA 断行类别的排版字符单位 必须被视为具有 AL 类别。 然而,用户代理还必须 分析此类字符序列的内容, 以检测词 边界, 并将每个边界视为一个软换行机会

由于各种语言都可能使用 带有 SA 类别字符的文字来书写, 如果内容语言 已知, 用户代理应使用此信息 来定制其分析。

6.1.1.2. 正字法断行

对于使用基于正字法音节的断行的文字 (例如巴厘文), UA 必须分析内容, 以找到插入软换行机会的正确位置。

注:在撰写本文时, Unicode 尚未定义如何执行此分析, 并将这些书写系统中的所有字符 都视为具有 AL 断行类别。 然而, 已经提出了一个提案 来解决该问题。 即使它尚非最终版本, 查阅它仍可能具有参考价值。 [L2-22-080R]

6.1.1.3. 回退断行

为了避免意外溢出, 如果用户代理无法执行所需的词汇 或正字法分析, 以便为需要该分析的任何内容语言进行断行——例如缺少 使用 SA 类别字符书写的语言的词典——它必须假定 在该书写系统中的排版字母单位对之间 存在软换行机会

注:此规定不会仅因 UA 未能在某个文本序列中找到词边界而被触发; 该文本序列很可能就是一个不可断开的单词。 它适用于例如 某个文本序列由高棉字符(U+1780 到 U+17FF)组成, 而用户代理不知道如何确定 高棉文中的词边界的情况。

6.1.2. 表达用户对基于短语断行的偏好

用户代理可以响应用户偏好, 激活 auto-phrase 中描述的特定语言内容分析。 具有此行为的用户代理必须通过 在用户来源中 将 word-break声明值设置为 auto-phrase 来做到这一点。

注:这允许作者通过调用 getComputedStyle() 来检测此特性是否已启用, 或者在适当情况下在作者来源中覆盖它。

6.2. 断行严格度:line-break 属性

名称: line-break
值: auto | loose | normal | strict | anywhere
初始值: auto
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 不适用
动画类型: 离散

此属性指定元素内所应用断行规则的严格度: 尤其是换行如何与 标点和符号相互作用。 这些值具有以下含义:

auto
UA 确定要使用的断行限制集合, 并且可以根据行长改变这些限制; 例如,对短行使用一组限制较少的断行规则。
loose
使用限制最少的一组断行规则断开文本。 通常用于短行,例如报纸中。
normal
使用最常见的一组断行规则断开文本。
strict
使用最严格的一组断行规则断开文本。
anywhere
每个排版字符 单位周围 都存在一个软换行机会, 包括任何标点字符 或保留的 空白周围, 或词中间, 不考虑任何禁止断行的限制, 即使这些限制由具有 GLWJZWJ 断行类别的字符引入, 或由 word-break 属性强制要求。 [UAX14] 不得对不同的换行机会设置优先级。 不应用连字符断字。

注:此值会触发终端中常见的断行 规则。

注:anywhere 只会在 white-space 设置为 break-spaces 时, 允许行尾的保留的空白 换到下一行, 因为在其他情况下:

当它确实对保留的空白产生影响时, 在 white-space: break-spaces 下, 它允许在一段空格序列的第一个空格之前断开, 而单独的 break-spaces 不会这样做。

CSS 区分文本换行规则中的 四个严格度等级。 对于 loosenormalstrict 中每一个实际生效的精确规则集合 由 UA 决定, 并应遵循语言惯例。 然而,对于这三个关键字,本规范确实要求:

注:上面列出的要求 只会在 CJK 文本中产生区别。 在仅匹配上述规则 且没有额外规则的实现中, line-break 只会影响 CJK 码点, 除非书写系统被标记为 中文日文。 未来级别可能会随着需求变得明确, 为其他书写系统和语言 添加额外的具体规则。

由于 UA 可以在 strict/normal/loose 模式之间添加额外区别, 这些值也可以在其他书写系统中表现出差异。 例如,具有足够先进泰语处理能力的 UA 可以选择将泰语断行中的不同严格度级别 映射到这些关键字, 例如在 strict 模式中禁止在复合词内断开 (例如将 ตัวอย่างการเขียนภาษาไทย 断为 ตัวอย่าง·การเขียน·ภาษาไทย), 而在 loose 中允许更多断点 (ตัวอย่าง·การ·เขียน·ภาษา·ไทย)。

注:CSSWG 认识到,在本规范的未来版本中, 可能需要对断行进行更细粒度的控制, 以满足高端出版需求。

注:虽然用户代理可以将 [UAX14] 作为其断行实现的起点, 但为了与现有实现实现最大互操作性, 以下偏离可能是可取的:

6.3. 连字符断字:词内的形态断行

6.3.1. 连字符断字控制:hyphens 属性

连字符断字 是对通常不允许断开的词进行受控拆分, 以改进段落布局, 通常是在音节或语素边界处拆分词, 并且常常以视觉方式指示该拆分 (通常通过插入连字符 U+2010)。 在某些情况下,连字符断字还可能改变词的拼写。 无论如何,连字符断字仅是一种渲染效果: 它不得影响底层文档内容, 也不得影响文本选择或搜索。

不同语言中的连字符断字做法各不相同, 可能不仅涉及在换行前插入连字符, 还可能在换行后插入连字符(或两者都插入), 插入与 U+2010 不同的字符, 或改变词的拼写。
语言 未断开 之前 之后
英语 Unbroken Un‐ broken
荷兰语 cafeetje café‐ tje
匈牙利语 Összeg Ösz‐ szeg
普通话 tú’àn tú‐ àn
àizēng‐fēnmíng àizēng‐ ‐fēnmíng
维吾尔语  [独立 DAL + 独立 ALEF + 词首 MEEM +
					          词中 YEH  + 词尾 DAL +
					          独立 ALEF MAKSURA] [独立 DAL + 独立 ALEF + 词首 MEEM +
					          词尾 YEH + 连字符 ] [ 独立 DAL + 独立 ALEF MAKSURA]
克里语 [ᑲᓯᑕᓂᐘᓂᓂᐠ]
					          (加拿大音节文字 KA +
					          加拿大音节文字 SI +
					          加拿大音节文字 TA +
					          加拿大音节文字 NI +
					          加拿大音节文字西克里 WA +
					          加拿大音节文字 NI +
					          加拿大音节文字 NI +
					          加拿大音节文字 FINAL GRAVE) [ᑲᓯᑕᓂ᐀]
					          (加拿大音节文字 KA +
					          加拿大音节文字 SI +
					          加拿大音节文字 TA +
					          加拿大音节文字 NI +
					          加拿大音节文字 HYPHEN) [ᐘᓂᓂᐠ]
					          (加拿大音节文字西克里 WA +
					          加拿大音节文字 NI +
					          加拿大音节文字 NI +
					          加拿大音节文字 FINAL GRAVE)

当一行在一个有效的连字符断字机会处断开时, 就会发生连字符断字; 连字符断字机会是一种软换行机会, 它存在于允许连字符断字的词内部。 在 CSS 中,连字符断字机会hyphens 属性控制。 CSS Text Level 3 并未定义连字符断字的精确规则; 但强烈鼓励 UA 优化其断点选择, 并选择适合语言的连字符断字点。

注:由 U+002D - HYPHEN-MINUS 字符 或 U+2010 ‐ HYPHEN 字符引入的软换行机会 不是连字符断字机会, 因为换行时不会创建拆分的视觉指示: 无论该行是否在该点换行, 这些字符都是可见的。

在计算 min-content 固有尺寸时, 考虑连字符断字机会。

注:这允许表格对其内容进行连字符断字, 而不是让内容溢出其包含块, 这对于像德语这样长词较多的语言尤其重要。

名称: hyphens
值: none | manual | auto
初始值: manual
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 不适用
动画类型: 离散

此属性控制是否允许连字符断字 在一行文本内部创建更多软换行机会。 这些值具有以下含义:

none
不对词进行连字符断字, 即使词内部的字符 显式定义了连字符断字机会

注:这不会抑制由始终可见的字符 例如 U+002D - HYPHEN-MINUS 或 U+2010 ‐ HYPHEN 所引入的现有软换行机会

manual
只有当词内部存在显式提示连字符断字机会的字符时, 才会对词进行连字符断字。 UA 必须使用适当的特定语言连字符断字字符, 并且应像同一点上的自动连字符断字一样, 应用任何适当的拼写变化。
在 Unicode 中,U+00AD 是一个条件性“软连字符”, 而 U+2010 是一个无条件连字符。 Unicode 标准附录 #14 描述了 Unicode 断行中软连字符的作用[UAX14] 在 HTML 中, &shy; 表示软连字符字符, 它提示一个连字符断字机会。
ex&shy;ample
auto
除了条件连字符显式指示的机会之外, 词还可以在由适合语言的连字符断字资源 自动确定的连字符断字机会处断开。 如果一个词包含条件连字符 (&shy; 或 U+00AD SOFT HYPHEN), 则必须忽略该词中其他位置的自动连字符断字机会, 而优先使用这些条件连字符。 然而,如果即使在此类机会处断开之后, 该词的某一部分仍然太长, 无法放入一行, 则可以使用自动连字符断字机会。

正确的自动连字符断字需要 与被断开文本的语言相适应的连字符断字资源。 因此,UA 只能对内容 语言已知 且自身具有适当连字符断字资源的文本 进行自动连字符断字。

作者应正确标注其内容的语言 (例如使用 HTML lang 属性 或 XML xml:lang 属性), 以获得正确的自动连字符断字。

UA 可以使用针对语言定制的启发式规则 将某些词排除在自动连字符断字之外。 例如,UA 可能会尝试通过排除匹配某些大小写和标点模式的词 来避免对专有名词进行连字符断字。 此类启发式规则不由本规范定义。 (注意,此类启发式规则需要因语言而异: 例如英语和德语具有非常不同的大小写惯例。)

hyphens 属性而言, 什么构成一个“词”取决于 UA。 然而,在确定词边界时, 必须忽略内联元素边界 和脱离流元素。

由于由条件连字符字符 (例如 U+00AD SOFT HYPHEN) 创建的连字符断字机会 而显示的任何字形 都由该字符表示, 并按照应用于该字符的属性设置样式。

注:当阿拉伯文等塑形文字 因连字符断字而允许在词内断开时, 字符仍会像词未被断开时一样塑形。

例如,如果维吾尔语单词 “داميدى” 被连字符断字,它应显示为 [独立 DAL + 独立 ALEF + 词首 MEEM +
		          词中 YEH + 连字符 + 换行 + 词尾 DAL +
		          独立 ALEF MAKSURA] 而不是 [独立 DAL + 独立 ALEF + 词首 MEEM +
		          词尾 YEH + 连字符 + 换行 + 独立 DAL +
		          独立 ALEF MAKSURA]

6.3.2. 连字符:hyphenate-character 属性

名称: hyphenate-character
值: auto | <string>
初始值: auto
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

此属性指定 在连字符断字后的词各部分之间显示的字符串。 这些值具有以下含义:

auto
指定用户代理应根据内容语言的排版惯例 找到合适的字符串, 可能来自与连字符断字词典相同的来源。
<string>
指定连字符断字时 出现在连字符断字断点处的字符串。 (此字符串的位置不受影响: UA 必须根据内容语言的排版惯例 插入该字符串, 默认是在连字符断字断点之前立即插入。) UA 可以使用值 截断为有限数量的排版字符单位; 它不得只截断一个排版字符单位的一部分。

注:指定空字符串 "" 是有效的, 并会使 UA 在连字符断字机会处断开, 而不插入可见的连字符断字字符。

连字符(U+2010)最常用于 表示一个词已被拆分。 然而,在必要时可以使用 hyphenate-character 指定不同类型的连字符。
[lang]:lang(ojs) { hyphenate-character: "᐀" /* CANADIAN SYLLABICS HYPHEN (U+1400) */ }

注:由自动连字符断字触发的连字符 和由软连字符触发的连字符 都按照 hyphenate-character 渲染。

6.3.3. 连字符断字大小限制:hyphenate-limit-zone 属性

名称: hyphenate-limit-zone
值: <length-percentage>
初始值: 0
适用于: 块容器
继承:
百分比: 相对于行盒的长度
计算值: 计算后的 <length-percentage>
规范顺序: 按语法
动画类型: 按计算值类型

hyphenate-limit-zone 是一个好名称吗?欢迎评论/建议。

此属性指定在触发连字符断字之前, 行盒中可以留下的最大未填充空间量 (在两端对齐之前); 触发连字符断字后,会将下一行中某个词的一部分 拉回当前行。

6.3.4. 连字符断字字符限制:hyphenate-limit-chars 属性

名称: hyphenate-limit-chars
值: [ auto | <integer> ]{1,3}
初始值: auto
适用于: 文本
继承:
百分比: 不适用
计算值: 三个值,每个值要么是 auto 关键字,要么是整数
规范顺序: 按语法
动画类型: 按计算值类型

此属性指定 连字符断字词中的最少字符数。 如果该词未满足 词中 / 连字符之前 / 连字符之后 所需的最少字符数, 则不得对该词进行连字符断字。 非间距组合标记(Unicode 通用类别 Mn) 和词内标点(Unicode 通用类别 P*) 不计入该最小值。

如果指定了三个值, 第一个值是词中总字符数所需的最小值, 第二个值是连字符断字点之前字符的最小值, 第三个值是连字符断字点之后字符的最小值。 如果缺少第三个值,则它与第二个值相同。 如果缺少第二个值,则它为 autoauto 值表示 UA 选择一个适应当前布局的值。

注:除非 UA 能够计算出更好的值, 否则建议 auto 表示 前后各 2 个字符,词总计 5 个字符。

在下面的示例中, 连字符断字词的最小大小留给 UA 决定 (这意味着它可能因语言、 行长或其他因素而变化), 但连字符断字点之前和之后的 最少字符数被设置为 3。
p { hyphenate-limit-chars: auto 3; }

6.3.5. 连字符断字行限制:hyphenate-limit-lineshyphenate-limit-last 属性

名称: hyphenate-limit-lines
值: no-limit | <integer>
初始值: no-limit
适用于: 块容器
继承:
百分比: 不适用
计算值: 指定的关键字或整数
规范顺序: 按语法
动画类型: 按计算值类型

此属性指示元素中 连续连字符断字行的最大数量。 no-limit 值表示没有限制。

在某些情况下,用户代理可能无法遵守指定值。 (参见 overflow-wrap。) 由这种紧急断行引入的连字符断字 是否会影响附近的连字符断字点,未作定义。

名称: hyphenate-limit-last
值: none | always | column | page | spread
初始值: none
适用于: 块容器
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

此属性指示元素、栏、页面和跨页末尾处的 连字符断字行为。 跨页是一组同时对读者可见的两个页面。 这些值具有以下含义:

none
不施加限制。
always
元素的最后一个完整行, 或元素内部任何栏、页面或跨页断裂之前的最后一行 不应进行连字符断字。
column
元素内部任何栏、页面或跨页断裂之前的最后一行 不应进行连字符断字。
page
元素内部页面或跨页断裂之前的最后一行 不应进行连字符断字。
spread
元素内部任何跨页断裂之前的最后一行 不应进行连字符断字。
p { hyphenate-limit-last: always }
div.chapter {	hyphenate-limit-last: spread }

当设置 hyphenate-limit-last: none 时, 一个段落可能被格式化为这样:

This is just a
simple example
to show Antarc-
tica.

使用 'hyphenate-limit-last: always' 会得到:

This is just a
simple example
to        show
Antarctica.

6.4. 溢出换行:overflow-wrapword-wrap)属性

名称: overflow-wrap
值: normal | break-word | anywhere
初始值: normal
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 不适用
动画类型: 离散

此属性指定当一个否则不可断开的字符串 太长而无法放入行盒时, UA 是否可以在一行内原本不允许断开的点处断开, 以防止溢出。 它只有在 white-space 允许换行时才有效。可能的值:

normal
行只能在允许的断点处断开。 然而, 如果一行中没有其他可接受的断点, 则可以放宽由 word-break: keep-all 引入的限制, 使其匹配 word-break: normal

此外,如果一行中没有其他可接受的断点, 也会放宽由 word-break: auto-phrase 引入的限制:

  • 如果抑制某个特定短语内部的软换行机会 会导致该短语即使放在一条空行上也发生溢出, 则用户代理必须回退到该短语内部 与 normal 相同的软换行机会
  • 如果这还不足以防止溢出, 则在每条会溢出的行中, 还必须放弃对连字符断字机会的抑制。
  • 作为中间措施, 用户代理也可以检测多个层级的短语, 当较长短语会导致溢出时, 选择较短的短语 (可能短到单个词)。

通过放宽 word-break: keep-allword-break: auto-phrase 所引入限制而获得的软 换行机会 在计算 min-content 固有尺寸被考虑。

anywhere
如果一行中没有其他可接受的断点, 一个否则不可断开的字符序列 可以在任意点断开。 塑形字符仍会像词未被断开一样塑形, 且字素簇必须作为一个单位保持在一起。 不会在断点处插入连字符断字字符。 由 anywhere 引入的软换行 机会 在计算 min-content 固有尺寸会被考虑

word-break: auto-phrase 的情况下, 只有当按照 overflow-wrap: normal 中所述放宽由 word-break: auto-phrase 引入的限制仍不足以防止溢出时, 才会引入这些额外的软换行机会

break-word
anywhere 相同, 但由 break-word 引入的软换行 机会 在计算 min-content 固有尺寸被考虑。

我们是否需要向 overflow-wrap 添加一个 none 值, 以退出按 overflow-wrap: normal 所允许的对 keep-allauto-phrase 限制的放宽?

出于历史兼容原因,UA 必须将 word-wrap 视为 旧式名称别名, 对应于 overflow-wrap 属性。

6.5. 断行细节

在确定断行时:

7. 对齐和两端对齐

对齐和两端对齐控制 内联内容如何分布在行盒内。

7.1. 文本对齐:text-align 简写

名称: text-align
值: start | end | left | right | center | <string> | justify | match-parent | justify-all
初始值: start
适用于: 块容器
继承:
百分比: 见各单项属性
计算值: 见各单项属性
动画类型: 离散
规范顺序: 不适用

简写属性 设置 text-align-alltext-align-last 属性, 并描述当内容没有完全填满行盒时, 块的内联级内容如何沿内联轴对齐。 除 justify-allmatch-parent 之外的值 会被赋给 text-align-all, 并将 text-align-last 重置为 auto

这些值具有以下含义:

start
内联级内容与行盒的起始边对齐。
end
内联级内容与行盒的结束边对齐。
left
内联级内容与行盒的line-left 边对齐。 (在竖排书写模式中, 这可以是物理顶部或底部, 取决于 writing-mode。) [CSS-WRITING-MODES-4]
right
内联级内容与行盒的line-right 边对齐。 (在竖排书写模式中, 这可以是物理顶部或底部, 取决于 writing-mode。) [CSS-WRITING-MODES-4]
center
内联级内容在行盒内居中。
<string>
字符串必须是单个字符; 否则声明无效,且必须被 忽略。 当应用于表格单元格时,指定对齐 字符, 单元格内容将围绕该字符对齐。 关于更多细节以及此值如何与关键字组合, 参见下文
justify
文本根据 text-justify 属性指定的方法 进行两端对齐, 以精确填满行盒。 除非由 text-align-last 另行指定, 强制换行之前的最后一行 会按 start 对齐。
justify-all
text-align-alltext-align-last 都设置为 justify, 从而强制最后一行也进行两端对齐。
match-parent
此值的行为与 inherit 相同 (计算为其父元素的计算值), 但继承值 startend 会相对于父元素的 direction 值解释, 并产生 leftright 的计算值。 当在根元素上指定时, 计算为 start

当在 text-align 简写上指定时, 会将 text-align-alltext-align-last 都设置为 match-parent

一段文本块 是一叠行盒。 此属性指定每个行盒内的内联级盒 如何相对于该行盒的起始侧和结束侧对齐。 对齐不是相对于 视口 或包含块。

justify 的情况下, UA 可以通过调整其文本 来拉伸或压缩任何内联盒。 (参见 text-justify。) 如果某个元素的空白 不是可折叠的, 则 UA 不需要为了两端对齐而调整其文本, 并且可以改为将该文本视为 没有两端对齐机会。 如果 UA 选择调整文本, 则它必须确保制表位 继续按照空白处理规则要求的方式对齐。

如果(在两端对齐之后,如有) 行盒的内联内容太长而无法放入其中, 则内容会按起始对齐: 任何放不下的内容 会溢出行盒的结束边。

关于如何确定行盒的起始边和结束边的细节, 参见 § 9.3 双向性和行盒

7.2. 表格列中的基于字符的对齐

当一列中的多个单元格指定了对齐字符时, 每个此类单元格中的对齐字符 会沿一条与列平行的轴居中, 并相应移动该列中的其余文本。 (注意,每个单元格中的字符串不必相同, 尽管通常是相同的。)

这里是否意在说明 应该对齐的是对齐字符的中心? 目前并不清楚这是否就是其表述, 但需要指定这一点(或一种不同的行为), 以描述当对齐字符的不同出现位置 使用不同字体时会发生什么。 (此外,这是否是预期行为?也许最重要的用例 是粗体与非粗体文本, 它们的宽度只略有不同。) [反馈] [2016-02-02 上午 10:00 面对面会议纪要]

以下样式表:

TD { text-align: "." center }

会使以下 HTML 表格中的美元数值列:

<TABLE>
<COL width="40">
<TR> <TH>Long distance calls
<TR> <TD> $1.30
<TR> <TD> $2.50
<TR> <TD> $10.80
<TR> <TD> $111.01
<TR> <TD> $85.
<TR> <TD> N/A
<TR> <TD> $.05
<TR> <TD> $.06
</TABLE>

沿小数点对齐。该表格可能渲染为如下:

+---------------------+
| Long distance calls |
+---------------------+
|         $1.30       |
|         $2.50       |
|        $10.80       |
|       $111.01       |
|        $85.         |
|        N/A          |
|          $.05       |
|          $.06       |
+---------------------+

关键字值可以与 <string> 值一起指定; 如果没有给出,则默认为 right。 此值用于:

注:基于字符的对齐默认使用右对齐, 因为数字系统几乎都是从左到右的, 即使在从右到左的书写系统中也是如此, 而基于字符的对齐的主要用例 是数值对齐。

如果对齐字符在文本中出现多次, 则使用第一次出现进行对齐。 如果对齐字符在单元格中完全没有出现, 则字符串会像对齐字符已被插入到其内容末尾一样对齐。

这需要指定 搜索对齐字符的文本是什么。 是否仅搜索其包含块为该单元格的流内文本? 或者是否考虑由该单元格建立的块格式化上下文中 任何流内后代中的文本? 如果是,是否仅在其 text-align 属性 与该单元格一致时才考虑? (是在对齐字符上一致,还是完全一致?)

这种像对齐字符 已被插入到单元格内容末尾那样对齐的行为, 与字符中心对齐结合起来, 会在单独位于一行且使用 <string> 文本对齐的行的结束侧产生间隙, 当该列中没有任何行具有对齐字符时, 或者更重要的是,当某些行 确实具有对齐字符, 但该列不是按其 max-content 宽度布局时。 这可能是不理想的。

当对齐字符 被插入到内容末尾时, 使用哪种字体? (特别是,如果对齐字符可能位于某个后代块中, 它使用该块的字体还是表格单元格的字体? 或者如果插入位置位于内联中的强制断点处, 它使用该内联的字体,还是块或单元格的字体?)

基于字符的对齐发生在表格单元格宽度计算之前, 因此自动宽度计算可以为对齐留出足够空间。 跨列单元格是在宽度计算之前还是之后参与对齐, 未作定义。 如果单元格内容的宽度约束阻止 整列完全对齐, 则所得对齐未定义。

这里应当有一个正式定义, 说明字符对齐如何影响 min-content 和 max-content 固有宽度 (包括表格列以及所有可以位于表格列内的内容)。 max-content 固有宽度需要拆分为三个数值 (假设对齐的是对齐字符的中心): 一个用于没有对齐字符的宽度, 一个用于对齐字符中心的内联起始侧宽度, 一个用于对齐字符中心的内联结束侧宽度。 这基于强制断点之间的所有文本片段 来作用于 max-content 宽度。 对于 min-content 宽度, 强制断点之间且内部包含可选断点的文本片段 显然应只贡献给无对齐字符宽度。 然而,不太清楚 是否所有 min-content 宽度都应这样工作, 或者强制断点之间不包含可选断点的片段 (也许只有实际包含对齐字符的那些片段) 是否应改为贡献给对齐字符起始侧 和结束侧的 min-content 宽度; 此选择是在表格 min-content 尺寸表示最窄合理尺寸的含义 与在更多情况下尊重对齐字符之间进行权衡。 另一个选项可能是使用是否允许在可选断点处断行 作为选择使用哪种行为的控制。

正式定义 具有 <string> 值的跨列单元格的 text-align 固有宽度贡献, 是对非跨列单元格固有宽度贡献所作决定的 一个复杂(虽然直接)的扩展; 这也应当被正式定义。 贡献最终会被分配给用于对齐的最起始列或最结束列 (取决于使用哪一列), 以及其他跨越列的无对齐字符固有宽度。

7.3. 默认文本对齐:text-align-all 属性

名称: text-align-all
值: start | end | left | right | center | <string> | justify | match-parent
初始值: start
适用于: 块容器
继承:
百分比: 不适用
计算值: 按指定的关键字,但 match-parent 按上文定义计算
规范顺序: 不适用
动画类型: 离散

text-align 简写属性的此单项属性 指定块容器中所有内联内容行的内联对齐, 但被 text-align-last 的非 auto 值覆盖的最后一行除外。 关于值的完整描述,参见 text-align

作者应使用 text-align 简写,而不是此属性。

7.4. 最后一行对齐:text-align-last 属性

名称: text-align-last
值: auto | start | end | left | right | center | justify | match-parent
初始值: auto
适用于: 块容器
继承:
百分比: 不适用
计算值: 按指定的关键字,但 match-parent 按上文定义计算
规范顺序: 不适用
动画类型: 离散

此属性描述块的最后一行或 强制 换行正前方的一行 如何对齐。

如果指定了 auto, 受影响行上的内容按 text-align-all 对齐, 除非 text-align-all 被设置为 justify, 在这种情况下它按 start 对齐。 所有其他值都按 text-align 中所述解释。

7.5. 两端对齐方法:text-justify 属性

名称: text-justify
值: [ auto | none | inter-word | inter-character | ruby ] || no-compress
初始值: auto
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字(旧值 distribute 除外)
规范顺序: 不适用
动画类型: 离散

此属性选择当行的对齐设置为 justify 时使用的两端对齐方法 (参见 text-align)。 此属性适用于文本, 但会从块容器继承到包含其内联级内容的根内联盒。 它接受以下值:

auto
UA 根据性能与充分呈现质量之间的平衡, 确定要遵循的两端对齐算法。 由于两端对齐规则会因书写系统语言而异, UA 应在可能时 使用适合该文本的两端对齐算法。
例如, UA 可以默认使用一种 对所有书写系统的简单通用折中两端对齐方法——例如主要扩展词分隔符 以及 CJK 排版字母单位之间的间距, 并次要地扩展 东南亚排版字母单位之间的间距。 然后,在段落的内容语言已知的情况下, 它可以选择更针对语言定制的两端对齐行为, 例如对日语遵循 日文文本 布局需求 [JLREQ], 对阿拉伯语使用草写延伸, 对德语使用 inter-word, 等等。

两行书法式阿拉伯文由于压缩形式和花饰形式的组合而对齐结尾

一个由 Tasmeem 渲染的 草写两端对齐阿拉伯文示例。 与英语类似, 阿拉伯文可以通过调整词间距进行两端对齐, 但在大多数样式中, 它也可以通过书法式地延长 或压缩字母形本身来进行两端对齐。 在此示例中, 上方文本通过使用延长(kashida)形式和花饰形式 被扩展以填满该行, 而下方行则通过对 ت 和 م 之间的字符 使用堆叠组合而稍微压缩。 通过采用传统书法技术, 排版者可以在保持流动感和色彩的同时对行进行两端对齐, 提供非常高质量的两端对齐效果。 然而,这本质上是一种非常特定于文字的效果。
额外空间部分分配给空格,部分分配给 CJK 和泰文字母之间
使用 text-justify: auto 的混合文字文本: 此解释使用通用折中两端对齐方法, 在空格处以及 CJK 和东南亚字母之间进行扩展。 对于具有词分隔符和/或 CJK 字符的行, 这实际上使用 inter-word + inter-ideograph 间距, 而对于没有这些内容的行, 或空格拉伸过远的行, 则回退到 inter-cluster 行为。
none
禁用两端对齐: 文本中不存在两端对齐机会
未插入额外空间。
使用 text-justify: none 的混合文字文本

注:此值旨在用于用户 样式表, 以提高可读性或满足无障碍目的。

inter-word
两端对齐仅调整词分隔符处的间距 (实际上是改变该行上使用的 word-spacing)。 这种行为通常用于使用空格分隔词的语言, 例如英语或韩语。
额外空间主要被均匀分配给空格。
使用 text-justify: inter-word 的混合文字文本
inter-character
两端对齐会调整 每一对相邻排版字符单位 之间的间距 (实际上是改变该行上使用的 letter-spacing)。 此值有时用于日语等东亚系统。
额外空间被均匀分配到
				          所有书写系统的空格和字母之间的位置。
使用 text-justify: inter-character 的混合文字文本

出于历史兼容原因, UA 还必须支持替代关键字 distribute, 它必须计算为 inter-character, 因而具有完全相同的含义和行为。 UA 可以将其视为旧式值别名

ruby
两端对齐按 auto 调整间距,

注:此值旨在用于ruby 注音, 提供合理的默认对齐。 参见 [CSS-RUBY-1]

no-compress
两端对齐不得压缩由 text-spacing-trimtext-autospace 控制的间距。 (如果未指定此值, 两端对齐过程可以减少此类间距, 除非该间距位于行的开头或结尾。)

注:日语压缩规则的一个示例 见 [JLREQ] 中的 3.8 Line Adjustment。

此关键字以前 是 text-spacing 的一部分; 现在它在这里,可能需要重命名得更具体, 因为它暗示例如 U+0020 不能被压缩。[Issue #7079]

由于最佳两端对齐对语言敏感, 作者应正确为其内容标注语言,以获得最佳结果。

注:本级 CSS 中的指南 并未描述完整的两端对齐算法。 它们只是完整算法应满足的 最低要求集合。 限制要求集合让 UA 在选择 满足其需求以及质量、速度和复杂度之间期望平衡的 两端对齐算法时具有一定余地。

7.5.1. 扩展和压缩文本

在对文本进行两端对齐时, 用户代理会取得一行内容末端与其行盒边缘之间的 剩余空间, 并将该空间分配到其内容中, 使内容精确填满行盒。 用户代理也可以分配负空间, 使一行容纳比正常间距条件下 原本能容纳的更多内容。

两端对齐机会是 两端对齐算法可以改变文本内间距的位置。 两端对齐机会可以由单个排版字符 单位 提供 (例如词分隔符), 也可以由两个排版字符 单位的并置提供。 与对软换行机会的控制一样, 一个排版字符单位是否提供两端对齐机会 由其父元素的 text-justify 值控制; 类似地, 两个连续排版字符单位之间 是否存在两端对齐机会 由它们最近共同祖先的 text-justify 值决定。

由两端对齐分配的空间是 letter-spacingword-spacing 属性所定义间距的额外部分。 当此类额外空间被分配给词分隔符两端对齐机会时, 它按与 word-spacing 相同的规则应用。 类似地,当空间被分配给两个排版字符单位之间的 两端对齐机会时, 应按与 letter-spacing 相同的规则应用。

两端对齐算法可以将两端对齐机会 划分为不同优先级。 给定级别内的所有两端对齐机会 都以相同优先级被扩展或压缩, 无论该机会由哪些排版字符单位创建。 例如, 如果两个汉字之间的两端对齐机会 和两个拉丁字母之间的两端对齐机会 被定义为同一级别 (如在 inter-character 两端对齐样式中), 它们不会因为来源于不同的排版字符 单位而被区别对待。 在本级中未定义 其他因素 (例如字体大小、letter-spacing、字形形状、行内位置等) 是否或如何影响空间在行内两端对齐 机会上的分配。

UA 可以启用或断开可选连字, 或使用其他字体特性 例如替代字形或字形压缩, 以帮助在任何方法下对文本进行两端对齐。 此行为不受本级 CSS 控制。 然而, UA 不得断开必需连字, 或以其他方式禁用正确塑形复杂文字所必需的特性。

如果一行内存在两端对齐机会, 并且文本对齐为该行指定完全两端对齐 (justify), 则该行必须进行两端对齐。

7.5.2. 处理符号和标点

在确定两端对齐机会时, 来自 Unicode Symbols (S*) 和 Punctuation (P*) 类的 排版字符单位 通常被视为与相同文字的排版字母单位相同 (或者,如果该字符的文字属性为 Common, 则视为主导文字的排版字母单位)。

然而,按排版传统, 可能存在控制符号和标点两端对齐的额外规则。 因此,UA 可以重新分配特定字符, 或引入额外的优先级层级, 以处理涉及符号和标点的两端对齐机会

例如,传统上在连续的 U+2014 — EM DASH、 U+2015 ― HORIZONTAL BAR、 U+2026 … HORIZONTAL ELLIPSIS、 或 U+2025 ‥ TWO DOT LEADER 字符之间没有两端对齐机会 [JLREQ]; 因此 UA 可能会将这些字符分配到“never”优先级。 再举一个例子,某些全角标点字符 (例如 U+301A 〚 LEFT WHITE SQUARE BRACKET) 在日语中被认为包含一个两端对齐机会。 因此 UA 可能会将这些字符分配到比表意字符之间的机会 更高的优先级。

7.5.3. 不可扩展文本

如果一行的内联内容无法被拉伸到行盒的完整宽度, 则它们必须按照 text-align-last 属性指定的方式对齐。 (如果 text-align-lastjustify, 则它们必须按 center 对齐。)

7.5.4. 草写文字

两端对齐不得在阿拉伯文等草写文字 的已连接排版字母单位之间 引入间隙。 如果能够做到, UA 可以将在这种排版字母单位序列内 分配给两端对齐机会的空间 转换为该序列的某种草写延伸形式。 否则,它必须假定在草写文字中 任何一对排版字母单位之间 都不存在两端对齐机会 (无论它们是否连接)。

以下是不可接受的两端对齐示例:
在每对阿拉伯字母之间添加间隙
在每对未连接的阿拉伯字母之间添加间隙

有些字体设计允许使用 tatweel 字符进行两端对齐。 执行基于 tatweel 的两端对齐的 UA 必须正确处理其使用规则。 注意,正确插入 tatweel 字符取决于上下文, 包括涉及的字母组合、 词内位置, 以及词在行内的位置。

7.5.5. auto 两端对齐的最低要求

对于 auto 两端对齐, 本规范不定义 所有两端对齐机会是什么, 它们如何排序优先级, 或多个层级的两端对齐 机会何时以及如何交互。 然而,它确实要求:

关于文本两端对齐的更多信息,可见于(或提交到) “完全两端对齐的方法”, 该索引按书写系统和语言编排, 并由 W3C 国际化工作组维护。 [JUSTIFY]

7.6. 在容器内对齐一段文本块:text-group-align 属性

名称: text-group-align
值: none | start | end | left | right | center
初始值: none
适用于: 块容器
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

此属性在保持文本对齐的同时, 将行盒的内容作为一组进行对齐。

组对齐 通过找到剩余空间最短的行盒, 并将该数量的空间作为 padding 添加到行盒的一侧或两侧来执行, 从而减少可用于其内容的空间; 然后对剩余空间内的内容应用文本对齐。 在同一块格式化上下文内, 所有后代流内行盒 在搜索最短剩余空间 以及添加 padding 时都会被考虑; 会跳过建立独立格式化上下文的后代内容。

此属性的一个变体 是可继承的, 并分别应用于每个块容器, 只影响作为该块直接子级的行盒。 这用处较小,但可能更容易实现。

如果还能以相同量 移动源自同一块容器的浮动, 会以某种方式让内容对齐得更漂亮, 这在 CJK 布局中尤其有价值。 具体如何工作,以及它如何与来自祖先元素的侵入浮动交互, 留给读者自行思考。

这些值具有以下含义:

none
文本对齐正常发生:不执行组对齐
start
通过在每个行盒的内联结束侧添加 padding, 将内联级内容组对齐内联 起始侧。
end
通过在每个行盒的内联起始侧添加 padding, 将内联级内容组对齐内联结束 侧。
left
通过在每个行盒的line-right 侧添加 padding, 将内联级内容组对齐line-left 侧。
right
通过在每个行盒的line-left 侧添加 padding, 将内联级内容组对齐line-right 侧。
center
通过在每个行盒的两侧添加 padding, 每侧添加一半间距, 将内联级内容组对齐到中心。

8. 间距

CSS 通过 word-spacingletter-spacingline-padding 属性 提供对常规文本间距的控制, 它们分别指定 词分隔符周围、 排版字符单位之间、 或行的开头/结尾处的额外空间。 它还通过 text-spacing-trim 属性 提供对间距的上下文控制, 该属性允许对 CJK 标点进行上下文相关的全角与半角设置; 以及通过 text-autospace 属性, 该属性允许在文字切换处或标点周围自动插入额外空间。

8.1. 词间距:word-spacing 属性

名称: word-spacing
值: normal | <length-percentage>
初始值: normal
适用于: 文本
继承:
百分比: 相对于使用的 font-size
计算值: 绝对长度和/或百分比
规范顺序: 不适用
动画类型: 按计算值类型

此属性指定“词”之间的额外间距。 值按下文定义解释:

normal
不应用额外间距。 计算为零。
<length-percentage>
指定额外间距, 位于字体定义的固有词间距之外。

注:百分比会原样继承, 并相对于当前元素使用的 font-size 解析 (因此表示相对于其所应用文本大小的尺寸), 不同于 em 单位,后者相对于其继承来源元素的 计算 font-size 解析为绝对长度。

额外间距应用于 空白处理规则应用后 文本中留下的每个词分隔符, 并且除非排版传统另有规定, 应在该字符两侧各应用一半。 值可以为负,但可能存在依赖实现的限制。

词分隔符字符 是其主要目的和一般用途是分隔词的 排版字符单位。 在 Unicode 中,这包括 (但并非穷尽定义为) 空格(U+0020)、 不换行空格(U+00A0)、 埃塞俄比亚词间空格(U+1361)、 爱琴海词分隔符(U+10100,U+10101)、 乌加里特词分隔符(U+1039F), 以及腓尼基词分隔符(U+1091F)。 [UNICODE]

注:一般标点, 以及固定宽度空格(例如 U+3000 和 U+2000 到 U+200A), 都不被视为词分隔符 字符, 因为即使它们经常碰巧分隔词, 其主要目的也不是分隔词。

如果不存在词分隔符 字符, 或者某个分词字符具有零前进宽度 (例如 U+200B ZERO WIDTH SPACE), 则用户代理不得在词之间创建额外间距。

8.2. 字距调整:letter-spacing 属性

名称: letter-spacing
值: normal | <length-percentage>
初始值: normal
适用于: 内联盒和文本
继承:
百分比: 相对于使用的 font-size
计算值: 绝对长度和/或百分比
规范顺序: 不适用
动画类型: 按计算值类型

此属性指定相邻排版字符单位之间的额外间距 (通常称为 tracking)。 Letter-spacing 在 双向重排之后应用, 并且是 字距微调word-spacing 之外的额外间距。 [CSS-WRITING-MODES-4] [CSS-FONTS-3] 取决于生效的两端对齐规则, 用户代理还可以进一步增加或减少 排版字符单位之间的空间, 以便对文本进行两端对齐

这些值具有以下含义:

normal
不应用额外间距。计算为零。
<length-percentage>
指定排版字符单位之间的额外间距。 值可以为负, 但可能存在依赖实现的限制。

注:百分比会原样继承, 并相对于当前元素使用的 font-size 解析 (因此表示相对于其所应用文本大小的尺寸), 不同于 em 单位,后者相对于其继承来源元素的 计算 font-size 解析为绝对长度。

出于历史兼容原因, 计算后的 letter-spacing 为零时, 会产生一个解析值getComputedStyle() 返回值) 为 normal

letter-spacing 而言, 每个连续的原子内联序列 (例如图像和 inline block) 被视为单个排版字符单位

Letter-spacing 不得应用于行首。 在本级中,是否在行尾应用 letter-spacing 未定义。

当 letter-spacing 不应用于行首或行尾时, 文本总是与块的边缘齐平。
p { letter-spacing: 1em; }
<p>abc</p>

a b c

a b c

因此 UA 真的不应 [RFC6919] 在一行的右侧或尾随边缘附加 letter spacing:

a b c 

两个排版字符单位之间的 letter spacing 实际上“属于”包含这两个排版字符单位的最内层元素: 两个相邻排版 字符单位 之间的总 letter spacing (在双向重排之后) 由包含这两个排版字符单位之间边界的 最内层元素指定并在其中渲染。 然而,UA 可以改为在元素边界处 将 letter-spacing 附加到某一侧的排版字符单位上, 使用与其包含元素相关的 letter-spacing 值。

注:由于 Web 兼容性问题, 本级允许这种次要行为。

内联盒预期只包含完全包含在该元素内部的字符之间的 letter spacing, 因而排除该元素右侧或尾随边缘上的 letter spacing:
p { letter-spacing: 1em; }
<p>a<span>bb</span>c</p>

a b b c

a b b c

因此,给定的 letter-spacing 值预期 只影响完全包含在指定该值的元素内部的字符之间的间距:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>bb</span>c</p>

a b  b c

这进一步意味着,将 letter-spacing 应用于 只包含单个字符的元素 对渲染结果没有影响:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>b</span>c</p>

a b c

由于 letter spacing 是在 RTL 重排之后插入的, 因此应用于下面内部 span 的 letter spacing 同样没有效果, 因为重排后 "c" 最终并不会挨着 "א":

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<!-- abc followed by Hebrew letters alef (א), bet (ב) and gimel (ג) -->
<!-- Reordering will display these in reverse order. -->
<p>ab<span></span>בג</p>

a b c א ב ג

Letter spacing 会忽略不可见的零宽格式化字符 (例如来自 Unicode Cf 类别的字符)。 必须像这些字符在文档中不存在一样添加间距。

例如,应用于 A&#x200B;Bletter-spacing 与应用于 AB 完全相同, 无论任何元素边界可能落在哪里。

当两个字符之间的有效间距不为零时 (由于两端对齐letter-spacing 的非零值), 用户代理不应应用可选连字, 即那些并非为基本正确字形塑形所必需的连字。 然而,通过底层 font-feature-settings 属性指定的 连字和其他字体特性 优先于此规则。 参见 CSS Fonts Module Level 3 § feature-precedence

例如,如果单词 “filial” 被设置 letter-spacing, 则不应使用 “fi” 连字, 因为它会阻止文本的均匀间距。
filial vs filial

注:在 OpenType 中,必需连字预期 关联到 rlig 特性。 因此所有其他连字都被视为可选。 然而,在某些情况下,UA 或平台启发式规则 会应用额外连字以处理有缺陷的字体; 本规范不定义也不覆盖这种例外处理。

8.2.1. 草写文字

如果能够做到, UA 可以通过将要分配给此类字母序列的总额外空间 转换为该序列的某种草写延伸形式 (或对于负 tracking 值为压缩形式), 从而将 letter spacing 应用于草写文字, 使该序列产生等效的总扩展(或压缩)。 否则, 如果 UA 无法在不破坏其草写连接的情况下扩展 草写文字文本, 则它不得在该文字的任何一对排版字母单位之间 应用任何间距 (实际上将每个词视为一个单独的排版字母 单位 以用于 letter-spacing)。 两种情况都会导致此类字母之间的有效间距为零; 但前者会保留文本被拉伸展开的感觉。

以下是一些适当和不适当的阿拉伯文间距展开示例。
原始文本
错误 在每个字母之间均匀分配空间。 注意这会破坏草写连接!
可以 通过排版上适当的草写延伸来分配 ∑letter-spacing所得文本与前一个均匀间距示例一样长。
可以 抑制阿拉伯字母之间的 letter-spacing注意 letter-spacing 仍然会应用于 非阿拉伯字符(例如空格)。
错误 仅在未连接字母之间应用 letter-spacing这会扭曲排版色彩并模糊词边界。

注:文本的适当草写延伸或压缩 可能会因 文字、 字体、 语言、 词内位置、 行内位置、 实现复杂度、 字体能力 以及书法偏好而变化, 并且在某些情况下可能根本无法实现。 它可能涉及使用缩短连字、 花饰变体、 上下文形式、 延长字形(例如 U+0640 ـ ARABIC TATWEEL), 或其他微排版技术。 为这些效果定义规则不属于 CSS 的范围。 作者应避免将 letter-spacing 应用于草写 文字, 除非他们准备接受不可互操作的结果。

8.3. 行首/行尾内边距:line-padding 属性

名称: line-padding
值: <length>
初始值: 0
适用于: 内联盒
继承:
百分比: 不适用
计算值: 绝对长度
规范顺序: 按语法
动画类型: 按计算值类型

letter-spacing 调整 排版字符单位之间的间距, 且不应用于行首或行尾; 相比之下,此属性只调整行首/行尾处的间距。 额外间距仅由行盒开头/结尾处的 最内层内联盒应用, 并插入在该内联盒的内容边缘 与相邻的内联级内容 (文本原子 内联)之间。 此额外空间不是两端对齐机会

给定以下 HTML 和 CSS:
p    { line-padding: 0.5em; line-height: 1; text-align: center }
span { background: black; color: white; }
em   { background: green; color: white; }

<p><span>Here is <em>some text</em></span>

Line-padding 将被插入, 使每行两侧各有额外的 0.5em 内联背景可见。 如果它渲染时在 “some” 和 “text” 之间发生断行, 则额外 padding 将是: 第一行左侧为黑色、右侧为绿色, 第二行两侧均为绿色。

Here is some
text

8.4. 自动上下文间距:text-autospace 属性

名称: text-autospace
值: normal | <autospace> | auto
初始值: normal
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

使用一组基于字符类别的规则, 控制同一内联格式化上下文中同一行上 相邻字符之间的间距, 允许自动控制跨文字体系间距 以及标点周围的间距。

值定义如下:

<autospace> = no-autospace |
              [ ideograph-alpha || ideograph-numeric || punctuation ]
              || [ insert | replace ]
normal
ideograph-alpha ideograph-numeric 行为相同。
no-autospace
不插入自动间距。
insert
如果该处尚不存在任何类型的空格字符(Unicode 通用类别 Z), 则自动插入指定的间距。

如果既未指定 insert 也未指定 replace, 则行为与 insert 相同。

replace
即使该处已经有一个空格 (U+0020), 也会自动插入指定的间距; 另外,该空格(U+0020)会被移除。 其他类型的空格字符(Unicode 通用类别 Z) 会像 insert 一样 抑制自动间距。

注:这是用于纠正使用 易于键入的 U+0020 而不是恰当间距的文本。

ideograph-alpha
表意文字序列与非表意字母序列之间创建额外间距, 参见 § 8.4.1 跨文字体系间距
ideograph-numeric
表意文字序列与非表意数字序列之间创建额外间距, 参见 § 8.4.1 跨文字体系间距
punctuation
按特定语言的排版惯例要求, 在标点周围创建额外的不换行间距。

在本级中,如果元素的内容语言是法语, 则会在法语 排版指南要求的位置插入 窄不换行空格(U+202F)和不换行空格(U+00A0)。 否则此值没有效果。 不过未来规范可能会为其他语言添加自动间距行为。

auto
用户代理选择一组排版质量较高的间距值。 在不同平台上运行的不同用户代理可能会选择不同的值。

注:这些间距值可能匹配也可能不匹配 操作系统平台惯例。

此属性会与 word-spacingletter-spacing 属性相加。 也就是说,由 letter-spacing 设置贡献的间距量(如果有) 会添加到 text-autospace 创建的间距中。 word-spacing 同理。

在元素边界处,字符之间引入的额外间距量 由包含该边界的最内层元素决定,并在其中渲染。

8.4.1. 跨文字体系间距

ideograph-alphaideograph-numeric 值 会在特定字符类别之间的边界处引入间距, 当它们在一行上直接相邻时, 即中间没有任何非零外边距边框内边距, 也没有中间字符(例如引号或空格)时。 这些关键字引入的空间量是 CJK 前进宽度的 1/8, 即如果 使用值中的 font-size 与其计算 值相同时为 0.125ic

注:间距惯例各不相同,但值通常 从 1/4ic 到低至 1/8ic 不等, 其中 1/4ic 由于金属活字限制在历史语境中更常见, 而 1/6ic 或更细的值在比例排版中更常见。 由于这些空隙默认会被插入 (通过初始值 normal), CSS 使用 1/8ic 以便保守地进行干预。 本模块未来级别可能会引入 对间距量的控制。

8.5. CJK 标点间距:text-spacing-trim 属性

名称: text-spacing-trim
值: <spacing-trim> | auto
初始值: normal
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

使用一组基于字符类别的规则, 控制同一内联格式化上下文中同一行上 CJK 标点字符周围的间距, 允许根据它们在行内的位置和相邻字符 将其设为半角或全角。

值定义如下:

<spacing-trim> = space-all | normal | space-first | trim-start | trim-both | trim-all
space-all
所有全角标点字符都设置为全宽字形(留空)。
normal
在每行开头,将全角开标点设置为全宽字形 (留空); 在每行末尾,如果全角闭标点在两端对齐之前 原本放不下, 则将其设置为半宽字形(贴齐), 否则将该标点设置为全宽字形; 并按下文所述 折叠标点字形之间的间距。
trim-both
在每行开头,将全角开标点设置为半宽字形 (贴齐); 在每行末尾,将全角闭标点设置为半宽字形 (贴齐); 并按下文所述 折叠标点字形之间的间距。
space-first
块 容器第一行 以及每个强制换行之后的行上, 将全角开标点设置为全宽字形 (留空)。 否则与 normal 相同。
此值是为兼容性要求而存在的。

此值用于管理某些现有中文和日文内容的格式化, 对这些内容而言,trim-both 在排版上本应是合适的, 只是它们已经被编写为 期望第一行按 space-all 设置。

具体而言, 由于各 UA 对 hanging-punctuation 缺乏可靠支持, 现有内容(尤其是 ePub 内容) 使用 U+3000 表意空格代替 text-indent, 但当段落以希望悬挂在缩进中的标点开头时 会省略它, 以创建悬挂标点效果。 在第一行上使用 trim-both 因而会修剪掉此类内容中的有效缩进, 从而模糊该行作为新段落首行的区别。

注意,这种使用表意空格进行缩进 (有时使用、有时不使用) 的排版做法 与 HTML 和 CSS 所提供的内容与样式分离原则相悖。 使用 hanging-punctuationtext-indent 来控制段落格式, 而不是微调文档的文本内容, 能保留文档源中该文本的真实语义, 并允许样式表设计者 在各种间距/缩进样式之间自由切换, 而无需改变内容。 示例参见 § 8.5.3 CSS 中的日文段首惯例

此外,行尾行为与 normaltrim-start 值保持一致, 而不是与 trim-both 保持一致: 它只在字形于两端对齐之前 原本放不下时才修剪字形。 虽然这在较少情况下改进排版, 但它更接近 space-all 的旧有行为, 从而减少兼容性顾虑。

trim-start
在每行开头,将全角开标点设置为半宽字形 (贴齐)。 否则与 normal 相同。
trim-all
全角开标点全角闭标点全角中点标点 设置为半宽字形, 不考虑其在行内的位置, 也不考虑相邻字符。
auto
用户代理选择一组排版质量较高的间距值。 在不同平台上运行的不同用户代理可能会选择不同的值。

注:这些间距值可能匹配也可能不匹配 操作系统平台惯例。

我们需要 auto 吗?作者在第一行开头选择 依赖平台的行为会很奇怪,除此之外它本应使用 trim-both

以下是各种值作用的非正式摘要:
行首修剪 行尾修剪 相邻成对修剪 处处修剪
space-all
normal 仅当原本放不下时
space-first 是,但第一行除外
trim-start
trim-both
trim-all
auto 用户代理特定 / 依赖平台

8.5.1. 全角标点折叠

通常,全角字符的字形具有与标准汉字 (例如 水 U+6C34) 相同的前进宽度。 然而,许多全角标点字形只占用全宽设计空间的一部分。 因此,此类标点并不总是按全宽设置。 text-spacing-trim 的若干值允许作者控制 何时将此类字符设为半宽(通常为表意字符宽度的一半), 以及何时将其设为全宽。

为了按指定方式设置文本,UA 将需要:

如果字体实现了 OpenType haltvhal 特性, UA 可以使用这些特性 对特定字形执行所需修剪。 UA 不得使用 hwid 特性 或以其他方式替换为半角形式, 因为切换到半角字形可能改变字形形状, 这在此处不可接受。

有些字体对全角标点字符使用比例字形。 如果字体不支持区分 全角与半角字形形状 (例如通过字体特性), 则对于此类比例字形, 给定前进宽度会被认为 同时是全宽和半宽: UA 不得向这些字形添加或移除空间。

注:标准汉字的前进宽度 可以根据字体度量来确定, 例如相反书写模式的 OpenType ideoidtp 基线, 或者通过取诸如 水 U+6C34 这样的汉字的前进宽度来确定。 (必须使用相反书写模式,因为有些字体被压缩, 使字符并非正方形。) 关于 OpenType 度量的更多信息可见于 OpenType 规范。 注意,如果 水 U+6C34、卜 U+535C 和 一 U+4E00 并非都有相同的前进宽度, 则该字体具有比例表意字形, 且无法通过测量字形可靠确定全角前进宽度。

有些字体具有全角标点字符, 其空白部分太小而无法修剪(kern)。 当 UA 判断修剪(字距微调)可能通过字形边界框、 字形度量或字体特性 导致字形截断、碰撞或过度字距微调时, UA 可以选择不进行修剪(kern)。

如果 text-spacing-trimtrim-all, 则 UA 必须折叠通常与此类全宽字形相关联的空间, 而不考虑它们出现的上下文。 否则,除非 text-spacing-trim 被设置为 space-all (或字体具有比例全角标点字形), UA 必须在此类全宽字形在一行上相邻放置时 按如下方式折叠通常与它们相关联的空间:

以下示例表列出了 受相邻成对修剪影响的标点对。 它使用半角等价形式来近似修剪效果。
相邻成对标点修剪演示
组合 示例对 看起来像
开标点—开标点 + (
中点—开标点 + (
闭标点—开标点 + (
表意空格—开标点  +  (
闭标点—闭标点 + )
闭标点—中点 + )
闭标点—表意空格 +  ) 

8.5.2. 文本间距字符类别

在此属性的上下文中,以下定义适用:

类别和 Unicode 码点 正在审查中, 并且至少需要一些变更以适应 Unicode 中较新的新增内容。[Issue #9503]

表意文字
包括所有排版字符单位 [CSS-TEXT-3],其基字符列于下方:
  • U+3041 到 U+30FF 范围内的所有字符, 但属于 Unicode Punctuation [P*] 通用 类别的字符除外。
  • CJK 笔画(U+31C0 到 U+31EF)。
  • 片假名音标扩展(U+31F0 到 U+31FF)。
  • 所有具有 Han 文字属性的字符。
非表意 字母
包括所有属于 Unicode Letters [L*] 和 Mark [M*] 通用类别排版字符单位, 除非满足以下任一条件:
非表意 数字
包括所有属于 Unicode Decimal Digit Number [Nd] 通用类别排版字符单位, 除非满足以下任一条件:
全角 开标点
包括任何属于 CJK Symbols and Punctuation 区块(U+3000–U+303F) 或被 [UAX11] 归类为东亚全角(F)的 开标点字符(Unicode 类别 Ps)。 还包括 LEFT SINGLE QUOTATION MARK(U+2018)和 LEFT DOUBLE QUOTATION MARK(U+201C)。 修剪时,会对左半边(横排文本)或上半边(竖排文本)进行字距微调。
全角 闭标点
包括任何属于 CJK Symbols and Punctuation 区块(U+3000–U+303F) 或被 [UAX11] 归类为东亚全角(F)的 闭标点字符(Unicode 类别 Pe)。 还包括 RIGHT SINGLE QUOTATION MARK(U+2019)和 RIGHT DOUBLE QUOTATION MARK(U+201D)。 也可以包括全角冒号标点和/或全角点号标点见下文)。 修剪时,会对右半边(横排文本)或下半边(竖排文本)进行字距微调。
全角中点标点
包括 MIDDLE DOT(U+00B7)、HYPHENATION POINT(U+2027)和 KATAKANA MIDDLE DOT(U+30FB)。 也可以包括全角冒号标点和/或全角点号标点见下文)。
全角 冒号标点
包括 FULLWIDTH COLON(U+FF1A)和 FULLWIDTH SEMICOLON(U+FF1B)。
全角点号 标点
包括 IDEOGRAPHIC COMMA(U+3001)、 IDEOGRAPHIC FULL STOP(U+3002)、 FULLWIDTH COMMA(U+FF0C)、 FULLWIDTH FULL STOP(U+FF0E)。

全角冒号标点全角点号标点 应被视为全角闭标点还是全角中 点标点, 取决于标点在字形盒中的绘制位置。 如果标点居中, 则应被视为中点标点。 如果标点被绘制到一侧(横排文本中为左侧,竖排文本中为顶部) 而另一半因此为空白, 则该标点应被视为闭标点并相应修剪。

UA 必须按适当情况 将全角冒号标点全角点号标点 归入全角闭标点类别 或全角中点标点类别。 UA 可以依赖语言惯例和书写模式(横排与竖排), 和/或字体信息来确定此分类。 UA 也可以按适当情况向任何类别添加额外字符。

以下信息性表格总结了 全角冒号和点号标点分类的语言惯例:
冒号标点 点号标点
简体中文(横排) 闭标点 闭标点
简体中文(竖排) 闭标点 闭标点
繁体中文 中点 中点
韩语 中点 闭标点
日语 中点 闭标点

注意,至少对于中文字体而言, 作者观察到通常并不遵循标准惯例。

8.5.3. CSS 中的日文段首惯例

日语有三种常见的起始边排版方案, 它们通过对开括号的处理方式加以区分。
第一种方案在第一行使开括号与缩进边缘贴齐,
			          并在其他行与起始边缘贴齐。
			          第二种方案赋予开括号完整宽度,
			          使其实际上从缩进边缘和其他行的起始边缘
			          缩进半个 em。
			          第三种方案使开括号与行的起始边缘贴齐,
			          但在第一行将其悬挂在缩进内
			          (因此以开括号开头的段落产生有效的半 em 缩进,
			          而不是完整 em 缩进)。

行首开括号的定位 [JLREQ]

假设 UA 样式表为 p { margin: 1em 0; }, CSS 可以通过以下规则实现日文排版样式:

8.6. 字符类别间距简写:text-spacing 属性

名称: text-spacing
值: none | auto | <spacing-trim> || <autospace>
初始值: 见各单项属性
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
动画类型: 离散
规范顺序: 按语法

此属性是一个简写, 用于在单个声明中设置 text-spacing-trimtext-autospace。 值定义如下:

none
关闭所有 text-spacing 特性: 将 text-spacing-trim 设置为 space-all, 并将 text-autospace 设置为 no-autospace
auto
text-spacing-trimtext-autospace 都设置为 auto
<spacing-trim>
text-spacing-trim 设置为指定值。 如果没有给出 <autospace> 值, 则 text-autospace 被设置为其初始 值
<autospace>
text-autospace 设置为指定值。 如果没有给出 <spacing-trim> 值, 则 text-spacing-trim 被设置为其初始 值

注:由于 normaltext-spacing-trimtext-autospace 二者的初始值, text-spacing: normal 会将二者重置为其初始值。

8.7. 跨元素边界的字形塑形

当以下任一情况对于其边界分隔两个排版字符单位的任意盒为真时, 文本塑形必须在内联盒边界处断开:

当不存在有效格式变化, 或者唯一的格式变化不会影响字形 (如应用文本装饰)时, 文本塑形不得跨内联盒边界断开。

在其他情况下, 如果考虑到字体技术限制,此情况合理且可行, 文本塑形不应跨内联盒边界断开。

跨边界塑形的一个合理且可行的示例 是阿拉伯文塑形: 在许多系统中,这是由字体引擎执行的, 允许字体提供变体字形, 并带有可能非常复杂的上下文塑形。 通常不可能跨字体变化依赖此系统, 除非字体引擎具有提供上下文的 API; 但引擎通过例如 适当地使用零宽连接符(U+200D)或零宽非连接符(U+200C) 来请求正确选择 词首/词中/词尾/独立字形, 从而绕过此限制,是直接且相当合理的。

跨边界塑形可能但不合理的一个示例 是处理某个字体,该字体需要依赖字符串两侧各 20 个字符的上下文 来选择其字形: 即使穿过多个带有格式变化的内联边界, 也传递相关字符串之前和之后的所有文本, 这很复杂。 UA 可以处理此类情况, 但不是必需的, 因为它们并非任何现代书写系统的典型需求或基本需求。

跨边界塑形不可能的一个示例 是在单词 “and” 中途改变字体粗细, 而该字体中一个连字会将该单词的 全部三个字母 “and” 替换为一个和号字形(“&”)。

9. 边缘效果

边缘效果控制 行相对于块中其他行的缩进(text-indent) 以及如何在一行的起始和结束边缘度量内容(hanging-punctuation)。

9.1. 首行缩进:text-indent 属性

名称: text-indent
值: [ <length-percentage> ] && hanging? && each-line?
初始值: 0
适用于: 块容器
继承:
百分比: 指块容器自身内联轴上的内部尺寸
计算值: 计算后的 <length-percentage> 值,加上任何指定关键字
规范顺序: 按语法
动画类型: 按计算值类型

此属性指定应用于块中 内联内容行的缩进。 缩进被视为应用于行盒起始边的外边距。

除非由 each-line 和/或 hanging 关键字 另行指定, 只有作为元素 首个格式化行 的行会受到影响。 [CSS-PSEUDO-4] 例如,匿名块盒的第一行只有在它是其父元素的第一个子级时 才会受到影响。

这些值具有以下含义:

<length>
以绝对长度给出缩进量。
<percentage>
以块容器自身逻辑 宽度的百分比 给出缩进量。

在计算固有尺寸贡献时, 百分比必须被视为 0, 但在执行布局时始终正常解析。

注:这可能导致元素溢出。 不建议同时使用百分比缩进和固有尺寸。

each-line
缩进会影响每个块容器的第一行 以及每个强制换行之后的行 (但不影响软 换行断点之后的行)。
hanging
反转哪些行受到影响。

如果在没有浮动存在的从左到右文本中, text-alignstart, 且 text-indent5em, 则第一行文本会从块内 5em 处开始:

     Since CSS1 it has been possible to
indent the first line of a block element
5em by setting the 'text-indent' property 
to '5em'.

如果我们添加 hanging 关键字, 则第一行会贴齐开始, 但其他行会缩进 5em:

In CSS3 we can instead indent all other
     lines of the block element by 5em
     by setting the 'text-indent' property
     to 'hanging 5em'.
由于 text-indent 属性只影响“首个格式化行”, 强制断行之后的行不会缩进。
   For example, in the middle of
this paragraph is an equation,
which is centered:
             x + y = z
The first line after the equation
is flush (else it would look like
we started a new paragraph).

然而,有时(如诗歌或代码中), 对每个碰巧长到需要换行的行进行缩进 是合适的。 在以下示例中,text-indent 被赋予 3em hanging each-line 值, 使诗歌第三行在块的右边界处软换行时 具有悬挂缩进:

In a short line of text
There need be no wrapping,
But when we go on and on and on  
   and on,
Sometimes a soft break
Can help us stay on the page.

注:由于 text-indent 属性会继承, 当在块元素上指定时,它会影响后代 inline-block 元素。 因此,通常明智的做法是,在被指定为 display: inline-block 的元素上 指定 text-indent: 0

9.2. 悬挂字形

当一行起始或结束边缘的字形悬挂时, 在度量该行内容以适配、对齐或两端对齐时, 不会考虑它。 根据该行的对齐/两端对齐方式, 这可能导致该标记被放置在线盒之外。 在计算固有尺寸min-content 尺寸max-content 尺寸) 以及由其派生的任何尺寸时, 也不会考虑悬挂字形。 (此度量与字距微调的交互目前由 UA 定义; CSSWG 欢迎就此提供建议。)

悬挂字形 仍被包围在其父内联盒内, 并且仍参与文本两端对齐: 只是在确定 一行能容纳多少内容、 为两端对齐该行内容需要扩展或压缩多少、 或如何为文本对齐在行盒内定位内容时, 不会度量其字符前进宽度。 实际上,悬挂字形的字符 前进宽度 被重新解释为其父内联盒 受影响边缘上的额外负外边距; 除此之外,该行照常布局。 溢出的悬挂字形 通常应被视为 墨水溢出, 以避免创建不必要的滚动条; 但当内容可编辑, 或在其他将其视为可滚动 溢出 会对用户有用的情况下, UA 可以将其视为可滚动溢出[CSS-OVERFLOW-3]

在某些情况下,一行末尾的字形 可以有条件地 悬挂: 只有当它在两端对齐之前原本放不进行内时, 它才会悬挂。 在度量该行内容是否适配时不会考虑它; 然而,它放不下的任何部分都会被认为悬挂。 在计算min-content 尺寸 以及由其派生的任何尺寸时, 不会考虑有条件悬挂的字形, 但在计算 max-content 尺寸 及由其派生的任何尺寸时会考虑它们。

悬挂字形 与行边缘之间的非零内联轴边框或内边距 会阻止该字形悬挂。 例如,具有结束侧内边距的内联盒末尾的句点 不会在一行的结束边缘悬挂

多个相邻字形可以一起悬挂, 但可以指定允许悬挂的具体数量限制 (例如每个行边缘最多可以有一个标点字符悬挂)。

9.2.1. 悬挂标点:hanging-punctuation 属性

名称: hanging-punctuation
值: none | [ first || [ force-end | allow-end ] || last ]
初始值: none
适用于: 文本
继承:
百分比: 不适用
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

此属性确定标点符号(如果存在) 是否悬挂, 并可在一行文本的开头或结尾 被放置在线盒之外 (或缩进中)。

注:如果块容器上没有足够的内边距, hanging-punctuation 可能触发溢出。

这些值具有以下含义:

none
不让任何标点字符悬挂
first
元素首个格式化行 开头的开括号、引号或表意空格会悬挂。 这适用于 Unicode 类别 Ps、Pf、Pi 中的所有字符, 加上 ASCII 引号 U+0027 ' APOSTROPHE 和 U+0022 " QUOTATION MARK 以及 IDEOGRAPHIC SPACE U+3000。
last
元素最后一个格式化行末尾的闭括号或引号会悬挂。 这适用于 Unicode 类别 Pe、Pf、Pi 中的所有字符, 加上 ASCII 引号 U+0027 ' APOSTROPHE 和 U+0022 " QUOTATION MARK。
force-end
行末的句末点号或逗号悬挂
allow-end
行末的句末点号或逗号有条件地悬挂

每个行边缘最多只能有一个标点字符悬挂

允许悬挂句末 点号和逗号包括:

U+002C , COMMA
U+002E . FULL STOP
U+060C ، ARABIC COMMA
U+06D4 ۔ ARABIC FULL STOP
U+3001 IDEOGRAPHIC COMMA
U+3002 IDEOGRAPHIC FULL STOP
U+FF0C FULLWIDTH COMMA
U+FF0E FULLWIDTH FULL STOP
U+FE50 SMALL COMMA
U+FE51 SMALL IDEOGRAPHIC COMMA
U+FE52 SMALL FULL STOP
U+FF61 HALFWIDTH IDEOGRAPHIC FULL STOP
U+FF64 HALFWIDTH IDEOGRAPHIC COMMA

UA 可以按适当情况包括其他字符。

注:CSS 工作组希望 包含其他字符的 UA 能够告知工作组 这些新增内容。

allow-endforce-end 是东亚使用的 两种悬挂标点变体。
hanging-punctuation: allow-end
p {
  text-align: justify;
  hanging-punctuation: allow-end;
}
hanging-punctuation: force-end
p {
  text-align: justify;
  hanging-punctuation: force-end;
}

对于 allow-end, 第一行末尾的标点不会悬挂, 因为它无需悬挂也能放下。 然而,如果使用 force-end, 则会强制它悬挂。 两端对齐会在不计入悬挂标点的情况下度量该行。 因此,当该行被扩展时,标点会被推出行外。

9.3. 双向性和行盒

行盒的起始结束 侧 由该行盒的内联基方向确定。 尽管它们通常相匹配, 行盒内联基方向 不同于包含块双向 段落内联基方向行盒内联基 方向会影响 text-align-alltext-align-lasttext-indenthanging-punctuation——即其内容相对于边缘的位置和对齐。 它不影响内联内容的格式化或排序 (后者由Unicode 双向 算法 控制,并由 CSS 书写模式 应用 [UAX9] [CSS-WRITING-MODES-4])。

在大多数情况下,行盒内联基方向 由其包含块计算后的 direction 给出。 然而, 如果其包含块具有 unicode-bidi: plaintext [CSS-WRITING-MODES-4]

在以下示例中, 假设 <block> 是一个按起始对齐的预格式化块 (display: block; white-space: pre; text-align: start), 则每隔一行会右对齐:
<block style="unicode-bidi: plaintext">
français
فارسی
français
فارسی
français
فارسی
</block>
由于在查找纯文本双向段落的内联基方向时 会跳过中性字符(例如标点) 和隔离序列, 以下示例中的行盒将是从左到右 (因此在给定 text-align: start 时左对齐), 如第一个强字符 ‘h’ 所指示:
<para style="display: block; direction: rtl; unicode-bidi:plaintext"><quote style="unicode-bidi:plaintext">שלום!</quote>”, they said.
</para>
<textarea style="direction: rtl; unicode-bidi:plaintext">

Hello!

</textarea>

由于 unicode-bidi: plaintext, “Hello!” 会按 LTR 排版 (即感叹号在右侧) 并左对齐, 忽略包含块的 RTL direction。 这也使其后的空行成为 LTR, 这意味着该行上的插入符应出现在其左边缘。 然而,第一个空行是右对齐的: 因为没有前一行, 它假定其包含块的 RTL 方向。

附录 A: 文本处理操作顺序

本附录是规范性的。

以下列表定义文本操作的顺序。 (只要所得布局相同,实现并不受此顺序约束。)

  1. § 4.2 空白修剪:white-space-trim 属性
  2. 空白处理第 I 部分(换行前)
  3. § 2.2 在词之间扩展:word-space-transform 属性文本变换
  4. 文本组合 [CSS-WRITING-MODES-4]
  5. 文本朝向 [CSS-WRITING-MODES-4]
  6. 在逐行应用以下操作时进行文本换行
    1. 缩进

    2. 双向重排 [CSS2] / [CSS-WRITING-MODES-4]

    3. 空白处理第 II 部分

    4. line-paddingletter-spacingword-spacingtext-spacing

    5. 字体/字形选择和定位 [CSS-FONTS-3]

    6. 悬挂标点

    注:这些操作可能影响一行能容纳多少文本, 因而会回环到换行。

  7. 两端对齐 (这可能影响字形选择和/或文本换行,并回环到该步骤)
  8. 文本对齐
  9. 文本组对齐

附录 B: 转换为纯文本

出于纯文本复制粘贴操作的目的,本附录是规范性的

当 CSS 渲染的文档被转换为纯文本格式时, 预期:

附录 C: 默认 UA 样式表

本附录是信息性的, 旨在帮助 UA 开发者为 HTML 实现默认样式表, 但 UA 开发者可以按适当情况自由忽略或修改。

/* make option elements align together */
option { text-align: match-parent; }

/* do not allow white space to collapse in textarea */
textarea { white-space-collapse: preserve !important; }

/* preserve character grid in preformatted text */
pre, code, kbd, samp, tt, listing, xmp, plaintext { text-spacing: none; }

/* Avoid hanging punctuation inheriting into preformatted blocks */
pre { hanging-punctuation: none; }

附录 D: 文字和间距

本附录是规范性的。

排版行为会因语言而有所差异, 但会因书写系统而有巨大差异。 本附录按照两端对齐和间距行为, 对 Unicode 6.0 中一些常见文字进行分类。 类别描述是描述性的,而非规定性的; 决定因素是两端对齐机会的优先级排序。

块状文字
CJK,以及扩展而言的所有 Wide 字符 (见东亚宽度 [UAX11])。 包括以下Unicode 文字: Bopomofo、Han、Hangul、Hiragana、Katakana 和 Yi。 还包括East Asian Width 属性WideFullwidth 的字符, 但 Ambiguous 字符只有在书写系统ChineseKoreanJapanese时才包括。
成簇 文字
成簇文字具有离散单位, 并且只在词边界处断开, 但不使用可见的词分隔符。 它们优先拉伸空格, 但也能舒适地接受字符间距用于两端对齐。 成簇文字包括但不限于 以下Unicode 文字: Khmer、 Lao、 Myanmar、 New Tai Lue、 Tai Le、 Tai Tham、 Tai Viet、 Thai
草写文字
草写文字不允许在其字母之间插入间隙, 无论是用于两端对齐还是用于 letter-spacing。 包括以下Unicode 文字: Arabic、 Hanifi Rohingya、 Mandaic、 Mongolian、 N’Ko、 Phags Pa、 Syriac

注:具有基线连接符的印度系文字 (例如 Devanagari 和 Gujarati) 被视为草写文字, 并且确实允许在排版字符单位之间 存在此类间隙。 参见 印度文字布局需求[ILREQ]

用户代理应随着其 Unicode 支持的更新而更新此列表, 以处理 Unicode 未来版本中尚未编码的草写文字, 并鼓励其请求 CSSWG 相应更新本规范。

附录 E: 字符和属性

本附录是规范性的。

Unicode 定义了四种码点级属性, 它们在 CSS 排版中被引用:

东亚 宽度属性
定义于 Unicode 标准附录 #11 [UAX11],并在 Unicode 字符数据库 [UAX44] 中作为 East_Asian_Width 属性给出。
通用类别
定义于 Unicode 标准附录 #44 [UAX44],并在 Unicode 字符数据库 [UAX44] 中作为 General_Category 属性给出。
文字属性
定义于 Unicode 标准附录 #24 [UAX24],并在 Unicode 字符数据库 [UAX44] 中作为 Script 属性给出。 (UA 必须在此映射中包括任何 ScriptExtensions.txt 分配。)
Vertical Orientation
定义于 Unicode 标准附录 #50 [UAX50], 并在 Unicode 字符数据库 [UAX44] 中作为 Vertical_Orientation 属性给出。

Unicode 定义单个码点的属性, 但有时需要确定 一个排版字符单位的属性。 出于 CSS Text 的目的, 排版字符单位的属性 由其第一个字素簇的基字符给出——但有两种情况除外:

附录 F: 识别内容书写系统

本附录是规范性的。

虽然大多数语言都有首选书写系统, 但有些语言有多个, 而且大多数语言也可以转写成一种或多种外来书写系统。 一个常见例子是,大多数语言至少有一种拉丁转写, 因而可以用拉丁书写系统书写。 转写文本通常采用该书写系统的排版惯例: 例如日语 “romaji” 和中文拼音使用拉丁字母和词间空格, 并相应遵循拉丁断行和两端对齐实践。 再例如,历史性的表意韩文 (ko-Hani) 不使用词间空格, 因此应以类似中文而不是现代韩文的方式排版。

在 HTML 或任何其他使用 BCP47 标签来识别语言以声明文档语言中的内容语言时, 作者可以使用文字子标签来消歧或指示使用非典型书写系统。 [BCP47] 例如,为了指示对并非原生使用拉丁书写系统的语言 使用拉丁书写系统, 可以添加 -Latn 文字子标签, 例如日语罗马字为 ja-Latn。 其他书写系统也有其他子标签, 参见 ISO 的 Code for the Representation of Names of ScriptsISO15924 文字标签注册表[ISO15924]

以下是一些将 BCP47 标签与文字子标签一起使用的常见/历史示例:
zh-Latn
中文,以拉丁转写书写。
ko-Hani
韩语,以汉字(中文表意字符)书写。
tr-Arab
土耳其语,以阿拉伯文字书写。
mn-Cyrl
蒙古语,以西里尔文字书写。
mn-Mong
蒙古语,以传统蒙古文字书写。

然而,BCP47 文字子标签通常不用于 (实际上也不鼓励用于) 与单一书写系统强相关的语言: 相反,在未指定其他书写系统时, 该书写系统预期会被隐含。 [BCP47] 为此,IANA 在其语言子标签 注册表中 通过 Suppress-Script 字段 维护各种语言最常见书写系统的数据库。

注:关于语言标记的更多建议可见于 国际化工作组“HTML 和 XML 中的语言标签”“选择语言 标签”

当未显式指示书写系统时, UA 应假定所声明内容 语言 的最常见书写系统, 用于断行或两端对齐等对语言敏感的排版行为。 然而,如果作者显式声明了不同的书写系统, UA 不得假定该书写系统。 如果 UA 对特定语言和书写系统组合 没有特定于语言的知识, 则它必须使用所声明书写系统的排版惯例 (必要时假定另一种语言的惯例), 而不是使用假定书写系统中所声明语言的惯例, 因为那会不适合所声明的书写系统。

语言与其最常见书写系统之间的完整对应关系 超出本文档范围。 然而,用户代理必须至少假定以下内容:

附录 G: 小假名映射

本附录是规范性的。

小假名到全尺寸假名的映射
全尺寸
ぁ U+3041 あ U+3042
ぃ U+3043 い U+3044
ぅ U+3045 う U+3046
ぇ U+3047 え U+3048
ぉ U+3049 お U+304A
ゕ U+3095 か U+304B
ゖ U+3096 け U+3051
𛄲 U+1B132 こ U+3053
っ U+3063 つ U+3064
ゃ U+3083 や U+3084
ゅ U+3085 ゆ U+3086
ょ U+3087 よ U+3088
ゎ U+308E わ U+308F
𛅐 U+1B150 ゐ U+3090
𛅑 U+1B151 ゑ U+3091
𛅒 U+1B152 を U+3092
ァ U+30A1 ア U+30A2
ィ U+30A3 イ U+30A4
ゥ U+30A5 ウ U+30A6
ェ U+30A7 エ U+30A8
ォ U+30A9 オ U+30AA
ヵ U+30F5 カ U+30AB
ㇰ U+31F0 ク U+30AF
ヶ U+30F6 ケ U+30B1
𛅕 U+1B155 コ U+30B3
ㇱ U+31F1 シ U+30B7
ㇲ U+31F2 ス U+30B9
ッ U+30C3 ツ U+30C4
ㇳ U+31F3 ト U+30C8
ㇴ U+31F4 ヌ U+30CC
ㇵ U+31F5 ハ U+30CF
ㇶ U+31F6 ヒ U+30D2
ㇷ U+31F7 フ U+30D5
ㇸ U+31F8 ヘ U+30D8
ㇹ U+31F9 ホ U+30DB
ㇺ U+31FA ム U+30E0
ャ U+30E3 ヤ U+30E4
ュ U+30E5 ユ U+30E6
ョ U+30E7 ヨ U+30E8
ㇻ U+31FB ラ U+30E9
ㇼ U+31FC リ U+30EA
ㇽ U+31FD ル U+30EB
ㇾ U+31FE レ U+30EC
ㇿ U+31FF ロ U+30ED
ヮ U+30EE ワ U+30EF
𛅤 U+1B164 ヰ U+30F0
𛅥 U+1B165 ヱ U+30F1
𛅦 U+1B166 ヲ U+30F2
𛅧 U+1B167 ン U+30F3
ァ U+FF67 ア U+FF71
ィ U+FF68 イ U+FF72
ゥ U+FF69 ウ U+FF73
ェ U+FF6A エ U+FF74
ォ U+FF6B オ U+FF75
ッ U+FF6F ツ U+FF82
ャ U+FF6C ヤ U+FF94
ュ U+FF6D ユ U+FF95
ョ U+FF6E ヨ U+FF96

附录 H: 词和短语检测

本附录是规范性的。

本规范中的少数操作 依赖自动化的 词边界检测短语边界检测

这两种操作类似: 用户代理对文本执行语言分析, 以识别特定于语言的有意义字符序列。 它们只是在目标文本单位上不同: 要么是词,要么是短语。

虽然在广义上容易理解, 但词和短语这两个概念都难以精确定义, 尤其难以用一种适用于多种语言的方式定义。 尽管如此,在此上下文中:

每个检测到的词或短语的起始和结束位置 称为词 边界短语 边界。 词边界和短语边界本身不可观察, 但 word-space-transformword-break 等属性可以在这些位置产生可见效果。

检测词或短语 并放置其边界的具体算法取决于 UA, 并且可以考虑多种因素或方法, 例如 基于词典的词法分析、 标点或其他定界字符识别、 形态分析、 机器学习方法……

不过必须遵守以下约束:

隐私考虑

本规范会泄露用户安装的连字符断字和断行词典。

安全考虑

本规范未引入新的安全考虑。

致谢

如果没有以下人员的帮助,本规范将不可能完成: Addison Phillips, Aharon Lanin, Alan Stearns, Ambrose Li, Arnold Schrijver, Arye Gittelman, Ayman Aldahleh, Ben Errez, Bert Bos, Chris Lilley, Chris Pratley, Chris Thrasher, Chris Wilson, Dave Hyatt, David Baron, Emilio Cobos Álvarez, Eric LeVine, Etan Wexler, Frank Tang, Håkon Wium Lie, IM Mincheol, Ian Hickson, James Clark, Javier Fernandez, John Daggett, Jonathan Kew, Ken Lunde, Laurie Anna Edlund, Marcin Sawicki, Martin Dürst, Martin Heijdra, Masafumi Yabe, Masayasu Ishikawa, Michael Jochimsen, Michel Suignard, Mike Bemford, Myles Maxfield, Nat McCully, Paul Nelson, Pierre-Anthony Lemieux, Rahul Sonnad, Randy Edmunds, Richard Ishida, Shinyu Murakami, Stephen Deach, Steve Zilles, Takao Suzuki, Tantek Çelik, Xidorn Quan, Yaniv Feinberg。

变更

本草案与 [CSS-TEXT-3] 保持同步,参见 CSS Text 3 § 变更
Level 4 特有的变更列于下方。

2024 年 5 月 29 日工作 草案以来的重要变更包括:

2024 年 2 月 19 日工作 草案以来的重要变更包括:

2023 年 10 月 20 日工作 草案以来的重要变更包括:

2023 年 3 月 29 日工作 草案以来的重要变更包括:

2023 年 3 月 1 日工作 草案以来的重要变更包括:

2022 年 12 月 31 日工作 草案以来的重要变更包括:

2022 年 5 月 5 日工作 草案以来的重要变更包括:

2019 年工作 草案以来的重要变更包括:

Level 3 以来的新增内容

Level 4 中的新特性:

一致性

文档约定

一致性要求通过 描述性断言和 RFC 2119 术语的组合来表达。规范性部分中的关键词 “MUST”、 “MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、 “RECOMMENDED”、“MAY” 和 “OPTIONAL” 应按 RFC 2119 中的描述来解释。 但是,为了可读性,这些词在本规范中并不全部以大写字母出现。

本规范的所有文本都是规范性的,除非章节 明确标记为非规范性、示例和注释。[RFC2119]

本规范中的示例以 “for example” 一词引入, 或者使用 class="example" 与规范性文本分隔开, 如下所示:

这是一个信息性示例的例子。

信息性注释以 “Note” 一词开头,并使用 class="note" 与规范性文本分隔开,如下所示:

注,这是一个信息性注释。

建议是以引起特别注意的样式呈现的规范性章节, 并使用 <strong class="advisement"> 与其他规范性文本分隔开, 如下所示: UA 必须提供可访问的替代方案。

一致性类别

对本规范的一致性 定义为三个一致性类别:

样式表
一个 CSS 样式表
渲染器
一个解释样式表语义并渲染 使用这些样式表的文档的 UA
创作工具
一个编写样式表的 UA

如果样式表中所有使用本模块定义语法的语句 都依照通用 CSS 语法以及本模块中每个特性的各自语法有效, 则该样式表符合本规范。

如果渲染器除按相应规范定义解释样式表之外, 还通过正确解析并相应渲染文档来支持 本规范定义的所有特性, 则该渲染器符合本规范。但是,UA 因设备限制 无法正确渲染某个文档, 并不会使该 UA 不符合规范。(例如,UA 并不 要求在单色显示器上渲染颜色。)

如果创作工具编写的样式表 依照通用 CSS 语法以及本模块中每个特性的各自语法 在语法上正确,并满足本模块所述的 样式表所有其他一致性要求, 则该创作工具符合本规范。

部分实现

为了让作者能够利用向前兼容的解析规则 来指定回退值,CSS 渲染器必须 将任何没有可用支持级别的 at 规则、属性、属性值、关键字 以及其他语法构造视为无效(并按适当方式忽略)。 尤其是,用户代理不得在一个多值属性声明中 选择性忽略不支持的组件值并接受支持的值: 如果任何值被认为无效 (不支持的值必须如此),CSS 要求忽略整个声明。

不稳定和专有特性的实现

为避免与未来稳定的 CSS 特性发生冲突, CSSWG 建议在实现 CSS 的不稳定特性和专有扩展遵循最佳实践

非实验性实现

一旦规范达到候选推荐阶段, 就可以存在非实验性实现,并且实现者应发布 他们能够证明已按规范正确实现的任何 CR 级特性的 无前缀实现。

为建立并维护 CSS 在各实现之间的互操作性, CSS 工作组请求非实验性 CSS 渲染器 在发布任何 CSS 特性的无前缀实现之前, 向 W3C 提交实现报告(并在必要时提交用于该实现报告的 测试用例)。提交给 W3C 的测试用例 需经 CSS 工作组审查和修正。

关于提交测试用例和实现报告的更多信息 可在 CSS 工作组网站上找到: https://www.w3.org/Style/CSS/Test/。 问题应发送至 public-css-testsuite@w3.org 邮件列表。

索引

本规范定义的术语

由引用定义的术语

参考文献

规范性参考文献

[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2024 年 3 月 11 日. CRD. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. 2024 年 8 月 4 日. WD. URL: https://www.w3.org/TR/css-box-4/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 4. 2018 年 12 月 18 日. FPWD. URL: https://www.w3.org/TR/css-break-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2022 年 1 月 13 日. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-COLOR-HDR-1]
Chris Lilley. CSS Color HDR Module Level 1. 2026 年 3 月 3 日. WD. URL: https://www.w3.org/TR/css-color-hdr-1/
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 3. 2023 年 3 月 30 日. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. 2025 年 11 月 6 日. WD. URL: https://www.w3.org/TR/css-display-4/
[CSS-FONTS-3]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 3. 2018 年 9 月 20 日. REC. URL: https://www.w3.org/TR/css-fonts-3/
[CSS-FONTS-4]
Chris Lilley. CSS Fonts Module Level 4. 2026 年 4 月 22 日. WD. URL: https://www.w3.org/TR/css-fonts-4/
[CSS-INLINE-3]
Elika Etemad. CSS Inline Layout Module Level 3. 2024 年 12 月 18 日. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 2025 年 10 月 7 日. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-OVERFLOW-4]
David Baron; Florian Rivoal; Elika Etemad. CSS Overflow Module Level 4. 2023 年 3 月 21 日. WD. URL: https://www.w3.org/TR/css-overflow-4/
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. 2025 年 6 月 27 日. WD. URL: https://www.w3.org/TR/css-pseudo-4/
[CSS-RUBY-1]
Elika Etemad; et al. CSS Ruby Annotation Layout Module Level 1. 2022 年 12 月 31 日. WD. URL: https://www.w3.org/TR/css-ruby-1/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. 2021 年 12 月 17 日. WD. URL: https://www.w3.org/TR/css-sizing-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. 2024 年 9 月 30 日. CRD. URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. 2024 年 5 月 29 日. WD. URL: https://www.w3.org/TR/css-text-4/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 2024 年 3 月 22 日. CRD. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2024 年 3 月 12 日. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 2019 年 12 月 10 日. REC. URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2019 年 7 月 30 日. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011 年 6 月 7 日. REC. URL: https://www.w3.org/TR/CSS2/
[CSS3-BREAK]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 2018 年 12 月 4 日. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS3-FLEXBOX]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov. CSS Flexible Box Layout Module Level 1. 2025 年 10 月 14 日. CRD. URL: https://www.w3.org/TR/css-flexbox-1/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 2021 年 8 月 26 日. WD. URL: https://www.w3.org/TR/cssom-1/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[MATHML-CORE]
David Carlisle; Frédéric Wang. MathML Core. 2025 年 6 月 24 日. CR. URL: https://www.w3.org/TR/mathml-core/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997 年 3 月. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[UAX11]
Ken Lunde 小林剣. East Asian Width. 2025 年 7 月 24 日. Unicode Standard Annex #11. URL: https://www.unicode.org/reports/tr11/tr11-44.html
[UAX14]
Robin Leroy. Unicode Line Breaking Algorithm. 2025 年 9 月 5 日. Unicode Standard Annex #14. URL: https://www.unicode.org/reports/tr14/tr14-55.html
[UAX24]
Ken Whistler. Unicode Script Property. 2025 年 7 月 31 日. Unicode Standard Annex #24. URL: https://www.unicode.org/reports/tr24/tr24-39.html
[UAX29]
Josh Hadley. Unicode Text Segmentation. 2025 年 8 月 17 日. Unicode Standard Annex #29. URL: https://www.unicode.org/reports/tr29/tr29-47.html
[UAX44]
Ken Whistler. Unicode Character Database. 2025 年 8 月 27 日. Unicode Standard Annex #44. URL: https://www.unicode.org/reports/tr44/tr44-36.html
[UAX50]
Ken Lunde 小林剣; Koji Ishii 石井宏治. Unicode Vertical Text Layout. 2025 年 7 月 24 日. Unicode Standard Annex #50. URL: https://www.unicode.org/reports/tr50/tr50-33.html
[UAX9]
Manish Goregaokar मनीष गोरेगांवकर; Robin Leroy. Unicode Bidirectional Algorithm. 2025 年 8 月 13 日. Unicode Standard Annex #9. URL: https://www.unicode.org/reports/tr9/tr9-51.html
[UNICODE]
The Unicode Standard. URL: https://www.unicode.org/versions/latest/

非规范性参考文献

[BCP47]
A. Phillips, Ed.; M. Davis, Ed.. Tags for Identifying Languages. 2009 年 9 月. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc5646
[CLREQ]
Fuqiao Xue; Richard Ishida. Requirements for Chinese Text Layout - 中文排版需求. 2026 年 5 月 3 日. DNOTE. URL: https://www.w3.org/TR/clreq/
[CSS-TEXT-DECOR-3]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 3. 2022 年 5 月 5 日. CRD. URL: https://www.w3.org/TR/css-text-decor-3/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[ILREQ]
Swaran Lata. Indic Layout Requirements. 2020 年 5 月 29 日. WD. URL: https://www.w3.org/TR/ilreq/
[ISO15924]
Code for the representation of names of scripts.. 1998. ISO 15924:1998. Draft International Standard.
[JIS4051]
Formatting rules for Japanese documents (日本語文書の組版方法).. 2004. JIS X 4051:2004. In Japanese.
[JLREQ]
Hiroyuki Chiba; et al. Requirements for Japanese Text Layout 日本語組版処理の要件(日本語版). 2020 年 8 月 11 日. NOTE. URL: https://www.w3.org/TR/jlreq/
[JUSTIFY]
Elika Etemad; Richard Ishida. Approches to Full Justification. URL: https://www.w3.org/International/articles/typography/justification
[L2-22-080R]
Norbert Lindenberg; Elika Etemad; Vaishnavi Murthy Yerkadithaya. Line breaking at orthographic syllable boundaries. Proposal. URL: https://www.unicode.org/L2/L2022/22080r-line-break-ortho-bnd.pdf
[RFC6919]
R. Barnes; S. Kent; E. Rescorla. Further Key Words for Use in RFCs to Indicate Requirement Levels. 2013 年 4 月 1 日. Experimental. URL: https://www.rfc-editor.org/rfc/rfc6919
[TYPOGRAPHY]
Richard Ishida. Language enablement index. 2024 年 11 月 15 日. DNOTE. URL: https://www.w3.org/TR/typography/
[XML10]
Tim Bray; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 2008 年 11 月 26 日. REC. URL: https://www.w3.org/TR/xml/
[ZHMARK]
General Rules for Punctuation (《标点符号用法》).. 2011. GB/T 15834―2011. In Chinese..

属性索引

名称 初始值 适用于 继承 百分比 动画类型 规范顺序 计算值
hanging-punctuation none | [ first || [ force-end | allow-end ] || last ] none 文本 不适用 离散 按语法 指定的关键字
hyphenate-character auto | <string> auto 文本 不适用 离散 按语法 指定的关键字
hyphenate-limit-chars [ auto | <integer> ]{1,3} auto 文本 不适用 按计算值类型 按语法 三个值,每个值要么是 auto 关键字,要么是整数
hyphenate-limit-last none | always | column | page | spread none 块容器 不适用 离散 按语法 指定的关键字
hyphenate-limit-lines no-limit | <integer> no-limit 块容器 不适用 按计算值类型 按语法 指定的关键字或整数
hyphenate-limit-zone <length-percentage> 0 块容器 指行盒的长度 按计算值类型 按语法 计算后的 <length-percentage> 值
hyphens none | manual | auto manual 文本 不适用 离散 不适用 指定的关键字
letter-spacing normal | <length-percentage> normal 内联盒和文本 相对于使用的 font-size 按计算值类型 不适用 绝对长度和/或百分比
line-break auto | loose | normal | strict | anywhere auto 文本 不适用 离散 不适用 指定的关键字
line-padding <length> 0 内联盒 不适用 按计算值类型 按语法 绝对长度
overflow-wrap normal | break-word | anywhere normal 文本 不适用 离散 不适用 指定的关键字
tab-size <number [0,∞]> | <length [0,∞]> 8 文本 不适用 按计算值类型 不适用 指定的数字或绝对长度
text-align start | end | left | right | center | <string> | justify | match-parent | justify-all start 块容器 见各单项属性 离散 不适用 见各单项属性
text-align-all start | end | left | right | center | <string> | justify | match-parent start 块容器 不适用 离散 不适用 按指定的关键字,但 match-parent 按上文定义计算
text-align-last auto | start | end | left | right | center | justify | match-parent auto 块容器 不适用 离散 不适用 按指定的关键字,但 match-parent 按上文定义计算
text-autospace normal | <autospace> | auto normal 文本 不适用 离散 按语法 指定的关键字
text-group-align none | start | end | left | right | center none 块容器 不适用 离散 按语法 指定的关键字
text-indent [ <length-percentage> ] && hanging? && each-line? 0 块容器 指块容器自身内联轴上的内部尺寸 按计算值类型 按语法 计算后的 <length-percentage> 值,加上任何指定关键字
text-justify [ auto | none | inter-word | inter-character | ruby ] || no-compress auto 文本 不适用 离散 不适用 指定的关键字(distribute 旧值除外)
text-spacing none | auto | <spacing-trim> || <autospace> 见各单项属性 文本 不适用 离散 按语法 指定的关键字
text-spacing-trim <spacing-trim> | auto normal 文本 不适用 离散 按语法 指定的关键字
text-transform none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto none 文本 不适用 离散 不适用 指定的关键字
text-wrap <'text-wrap-mode'> || <'text-wrap-style'> wrap 见各单项属性 见各单项属性 见各单项属性 见各单项属性 按语法 见各单项属性
text-wrap-mode wrap | nowrap wrap 文本 不适用 离散 按语法 指定的关键字
text-wrap-style auto | balance | stable | pretty | avoid-orphans auto 建立内联格式化上下文的块容器 不适用 离散 按语法 指定的关键字
white-space normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'> normal 文本 见各单项属性 不适用 离散 不适用 指定的关键字
white-space-collapse collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces collapse 文本 不适用 离散 按语法 指定的关键字
white-space-trim none | discard-before || discard-after || discard-inner none 内联盒和块容器 不适用 离散 按语法 指定的关键字
word-break normal | break-all | keep-all | manual | auto-phrase | break-word normal 文本 不适用 离散 不适用 指定的关键字
word-space-transform none | [ space | ideographic-space ] && auto-phrase? none 文本 不适用 离散 按语法 按指定
word-spacing normal | <length-percentage> normal 文本 相对于使用的 font-size 按计算值类型 不适用 绝对长度和/或百分比
wrap-after auto | avoid | avoid-line | avoid-flex | line | flex auto 内联级盒和 flex 项 不适用 离散 按语法 指定的关键字
wrap-before auto | avoid | avoid-line | avoid-flex | line | flex auto 内联级盒和 flex 项 不适用 离散 按语法 指定的关键字
wrap-inside auto | avoid auto 内联盒 不适用 离散 按语法 指定的关键字

问题索引

本节仍在讨论中,未来草案中可能会变化。
这是否保留断行机会?还是不保留?我们是否需要一个不同的 "hide" 值? 如果它保留断行机会, 也许它应替换为一个 word-space-transform 值?
对于 white-space-collapse: preserve-spaces,这里应发生什么?
我们是否应在 Level 4 中定义这一点?
CSSWG 正在为 avoid-orphans 寻找更好的名称。
参见讨论串。 问题涉及要求行具有最小长度。 常见度量似乎是

建议的值空间是 match-indent | <length> | <percentage> (以 Xch 作为示例,使该用例明确)。 或者 <integer> 实际上可以计数字符。

尚不清楚这将如何与文本平衡(上文)交互; 一个早期提案曾将它们作为同一属性 (其中 100% 表示完全平衡)。

人们曾要求基于词的限制,但由于这实际上 取决于词的长度,基于字符会更好。

另一种做法是,此值可以基于 keep-all 而不是 normal。 还有另一种变体是将此行为 与 keep-all 合并。
hyphenate-limit-zone 是个好名称吗?有评论/建议吗?
我们是否需要向 overflow-wrap 添加一个 none 值, 以选择退出按 overflow-wrap: normal 所允许的 放宽 keep-allauto-phrase 限制?
这里是否意在说明应对齐的是对齐字符的中心? 目前并不清楚它是否如此表达, 但需要指定这一点(或不同的行为), 以描述当对齐字符的不同出现 使用不同字体时会发生什么。 (此外,这是否是预期行为?也许需要考虑的最 重要用例是粗体与非粗体文本, 它们的宽度仅略有差异。) [反馈] [2016-02-02 10:00 AM 面对面会议纪要]
这需要指定要搜索哪些文本 来查找对齐字符。 是否只包括其包含块是单元格的流内文本? 还是单元格建立的块格式化上下文中 任何流内后代中的文本都要考虑? 如果是这样,是否只有在其 text-align 属性 与单元格一致时才考虑? (是在对齐字符上一致,还是完全一致?)
这种像在单元格内容末尾插入了对齐字符一样进行对齐的行为, 结合字符中心对齐, 会在具有 <string> 文本对齐的 单独成行的行的结束侧产生间隙, 当该列的所有行都没有对齐字符时, 或者更重要的是,当某些行 确实有对齐字符, 但该列并未按其 max-content 宽度布局时。 这可能并不理想。
当对齐字符被插入到 内容末尾时, 使用哪种字体? (特别是,如果对齐字符可能位于后代块内, 它使用该块的字体,还是表格单元格的字体? 或者,如果插入位置是在内联内的强制断行处, 它使用该内联的字体,还是该块或单元格的字体?)
这里应正式定义 字符对齐如何影响 min-content 和 max-content 固有宽度 (表格列以及表格列内所有内容的固有宽度)。 max-content 固有宽度需要拆分为 三个数值(假设对齐的是 对齐字符的中心): 一个用于没有对齐字符的宽度, 一个用于对齐字符中心的 inline-start 侧宽度, 一个用于对齐字符中心的 inline-end 侧宽度。 这基于强制断点之间的所有文本片段 来处理 max-content 宽度。 对于 min-content 宽度,强制断点之间 包含可选断点的文本片段显然应只贡献 不含对齐字符的宽度。 然而,不太清楚 是否所有 min-content 宽度都应这样处理, 还是强制断点之间 不含可选断点的片段 (并且也许只有那些实际包含对齐字符的片段) 才应改为贡献对齐字符起始侧 和结束侧的 min-content 宽度; 这种选择是在表格 min-content 尺寸表示最窄合理尺寸的含义与 在更多情况下尊重对齐字符之间的权衡。 另一种选择可能是使用是否允许 可选断点处断行来控制采用哪种行为。
正式定义具有 <string> 值的 text-align 的跨列单元格固有宽度贡献,是对 非跨列单元格固有宽度贡献所作决定的一个复杂 (虽然直接)的扩展; 这也应被正式定义。 贡献最终会被分配给用于对齐的 最起始或最结束列的拆分固有宽度, 以及其他跨越列的不含对齐字符的固有宽度。
此关键字以前是 text-spacing 的一部分; 现在它在这里,可能需要重命名得更具体, 因为它暗示例如 U+0020 不能被压缩。[Issue #7079]
此属性的一个变体是可继承的, 并分别应用于每个块容器, 只影响作为该块直接子级的行盒。 这用处较小,但可能更容易实现。
如果还能以相同量 移动源自同一块容器的浮动, 会以某种方式让内容对齐得更漂亮, 这在 CJK 布局中尤其有价值。 具体如何工作,以及它如何与来自祖先元素的侵入浮动交互, 留给读者自行思考。
我们需要 auto 吗?作者在第一行开头选择 依赖平台的行为会很奇怪,除此之外它本应使用 trim-both
类别和 Unicode 码点 正在审查中, 并且至少需要一些变更以适应 Unicode 中较新的新增内容。[Issue #9503]