1. 简介
此模块描述了CSS的排版控制;即控制从源文本到格式化、换行文本的转换的CSS功能。 各种CSS属性提供了对大小写转换、空白字符折叠、文本换行、断行规则和连字符、对齐与两端对齐、间距、 以及缩进的控制。 查看自第3级后的添加项以了解第3级后的新增内容。
有关全球各种语言和书写系统排版要求的更多信息, 请参见国际化工作组的语言支持索引。[TYPOGRAPHY]
1.1. 模块交互
此模块与CSS文本装饰模块 一起,替换并扩展了层叠样式表第2级第16章中定义的文本级功能。 [CSS-TEXT-DECOR-3] [CSS2]
除了下文定义的术语外, 本规范中使用的其他术语和概念定义 于层叠样式表第2级和CSS书写模式模块。[CSS2]和[CSS-WRITING-MODES-4]。
1.2. 值的定义
本规范遵循CSS属性定义约定,使用来自[CSS2]的值定义语法。[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
,而不是ko
(ko-Kore
)。
另一个例子是日语(ja
)通常以组合形式(-Japn
)书写,
其中包含平假名(-Hira
)、片假名(-Kana
)和汉字(-Hani
)。
然而,它也可以“罗马化”成拉丁字母(-Latn
),
用于语言学习教科书等特殊用途,
此时它应该更像英语而不是日语进行格式化。
第三个例子是当代蒙古语有两种书写形式:
西里尔字母(-Cyrl
,在蒙古国官方使用)
和蒙古文字(-Mong
,在中国内蒙古较为常见)。
这些书写形式有非常不同的格式要求,
西里尔字母的行为类似于拉丁字母和希腊字母,
而蒙古文字则源于阿拉伯和中文的书写惯例。
1.4. 字符与字母
排版的基本单位是字符。 然而,由于书写系统并不总是像基本的英语字母那样简单, 字符的实际含义取决于使用该术语的上下文。 例如,在韩文(朝鲜书写系统)中, 每个音节的方块表示形式 (例如한=Han) 可以被认为是一个字符。 然而,方块符号实际上是由多个代表音素的字母组成的 (例如ㅎ=h,ㅏ=a,ㄴ=n), 这些也可以各自被视为一个字符。
对于任何给定编码,计算机文本编码的基本单位也称为字符, 并且根据编码的不同, 单个编码字符可能对应于整个预组合音节字符(例如한), 对应于单个音素字符(例如ㅎ), 或对应于较小的单位,例如 基本字母形式(例如ㅇ) 及其变化的任何组合标记(例如表示送气的额外笔画)。
反过来,单个编码的字符 可以在数据流中表示为一个或多个字节; 在编程环境中,有时一个字节也被称为字符。
因此,术语字符在需要技术精确时相当模糊。
对于文本布局,我们将使用排版字符单位作为文本的基本单位。 即使在文本布局领域内, 相关的字符单位也取决于具体操作。 例如,断行和字母间距会对包含U+0E33 ำ泰文字母SARA AM的泰语字符序列进行不同的分割; 或者在如天城文这样的书写系统中,辅音的行为可能取决于所使用的字体。 因此,排版字符表示一个书写系统的单位——如拉丁字母(包括其变音符号)、 韩文字节、 中文表意文字、 缅文音节集群——在特定的排版操作 (如断行、首字母效果、字距、两端对齐、垂直排列等)中是不可分割的。
Unicode标准附录第29号:文本分割 定义了一个称为书写符号集群的单位,近似于排版字符。 [UAX29] UA必须使用 扩展书写符号集群(而不是传统书写符号集群),如 UAX29中定义的那样, 作为其排版字符单位的基础。 然而,UA应根据排版传统的要求调整这些定义, 因为默认规则并不总是合适或理想的——并且根据需要预期对不同操作进行不同的调整。
注意:此类调整的规则超出了CSS的范围。
- 在某些书写系统中,如缅文或天城文, 断行和两端对齐的排版字符单位是整个音节, 这可能包含多个Unicode 书写符号集群。[UAX29]
-
在其他书写系统中,如泰语或老挝语,
即使对于断行,排版字符与Unicode的默认书写符号集群相匹配,
但对于字母间距,相关单位
小于Unicode的书写符号集群,
并可能需要在插入间距之前进行分解或其他替换。
[UAX29]
例如, 为了正确地调整泰语单词คำ(U+0E04 + U+0E33)的字母间距, 需要将U+0E33分解为U+0E4D + U+0E32, 然后在U+0E32之前插入额外的字母间距:คํ า。
一个稍微复杂的例子是น้ำ(U+0E19 + U+0E49 + U+0E33)。 在这种情况下,正常的泰语字形首先将U+0E33分解为U+0E4D + U+0E32, 然后将U+0E4D与U+0E49交换,得到U+0E19 + U+0E4D + U+0E49 + U+0E32。 如前所述,在U+0E32之前插入额外的字母间距:นํ้ า。
- 垂直排版也可能需要调整。 例如,在排版竖排文本时, 藏文tsek和shad标记与前面的书写符号集群保持在一起, 而不是作为独立的排版字符单位处理。[CSS-WRITING-MODES-4]
排版字母单位 (或本规范中为字母) 是属于字母或数字通用类别的排版字符单位。 参见附录E: 字符与属性,了解如何确定排版字符单位的Unicode属性。
被元素边界分割的排版字符单位的渲染特性未定义。 理想情况下,每个组件应根据其各自元素属性的格式要求进行渲染, 同时保持整个排版字符单位的正确造型和定位。 然而,取决于其各部分之间的格式差异性质 以及所使用的字体技术的能力, 这并不总是可行的。 因此,这样的排版字符单位可能 会被渲染为属于边界的任一侧, 或作为同时属于两者的近似值。 需要提醒作者的是,通过元素边界分割书写符号集群或连字 可能会产生不一致或不理想的结果。
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
- 将所有小假名 字符转换为等效的全大小假名。 此值通常用于注音文字, 作者可能希望将所有小假名绘制为大假名, 以补偿在注音文字中使用的小字体大小导致的可读性问题。
- math-auto
- 请参见MathML核心 § 4.2 新的text-transform值。
注意: text-transform的目的是 允许进行表层的大小写转换, 而不影响文档的语义。 特别注意,text-transform 的大小写操作是有损的, 可能会扭曲文本的含义。 虽然辅助接口可能希望向用户传达 渲染文本的表面大小写, 但转换后的文本不能依赖于准确代表 文档的底层含义。
section > p:first-of-type::first-line{ text-transform : uppercase; }
此效果无法写入源文档, 因为换行的位置取决于布局。 另外,大写也不反映语义上的区分, 并不打算影响段落的阅读; 因此它应属于呈现层。
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字符的完整大小写映射, 包括任何条件大小写规则, 如在Unicode标准的默认大小写算法部分中定义的。[UNICODE] 如果(且仅当) 元素的内容语言 按照文档语言的规则已知, 则还必须应用任何适用的特定语言规则。 这些至少包括但不限于 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
- 如果内容语言已知 且用户代理支持该语言的语言学分析, 用户代理必须检测短语边界。 如果在该边界没有出现单词分隔符, 则用户代理必须插入一个虚拟可扩展分隔符。
就此属性而言,可扩展分隔符包括:
虚拟可扩展分隔符 是 文本中由UA检测到的语法边界, 它表示源文档中不存在的可扩展分隔符。 除了用于此属性外,它没有其他效果。
用户代理不得替换 紧接着或紧跟强制换行的可扩展分隔符(忽略任何介入的行内框边界 及相关的外边距、 边框、 内边距)。
注意: 由于 虚拟可扩展分隔符是 放置在参与行内框边界的最外层元素中, 如果其与某个父框的边界重合, 且该父框的使用值为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. 操作顺序
当需要应用多个转换时, 它们按以下顺序应用:
单词空格转换和 文本转换发生在 § 4.3.1 第I阶段:折叠和转换 之后,但在 § 4.3.2 第II阶段:修剪和定位 之前。 这意味着例如 full-width 仅在 保留的 空白 中将空格(U+0020)转换为U+3000表意空格。
注意: 正如 附录A:文本处理操作顺序 中定义的那样, 转换会影响换行和其他格式化操作。
3. 空白和换行:white-space 属性
名称: | white-space |
---|---|
值: | normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'> |
初始值: | normal |
适用对象: | 文本 |
继承: | 单独的属性 |
百分比: | 不适用 |
计算值: | 指定的关键字 |
规范顺序: | 不适用 |
动画类型: | 离散 |
此属性是 white-space-collapse,text-wrap-mode 和 white-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-collapse 和 white-space-trim 属性控制) 仅对渲染进行解释: 它对基础文档数据没有影响。
注意: 根据文档语言,
片段可以由特定的换行序列分隔
(例如换行符或 CRLF 对),
或者通过其他机制分隔,
例如 SGML 中的 RECORD-START
和 RECORD-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.1 § 9.2.2.1 匿名内联框。[CSS2]
控制字符(Unicode
类别 Cc
)——除了制表符(U+0009),
换行符(U+000A),
回车符(U+000D)和构成 段落分隔
的序列——必须呈现为可见的字形,
如果字体中找不到可见的字形,用户代理必须合成它,
并且必须像处理“其他符号”(So
)通用类别
和通用脚本的其他字符一样对待。
用户代理可以使用字体为控制字符专门提供的字形,
替换控制图片块中对应符号的字形,
生成其代码点值的视觉表示,
或使用其他方法提供适当的可见字形。
按 Unicode 要求,
不支持的 Default_ignorable
字符
必须在文本渲染时被忽略。[UNICODE]
回车符(U+000D)在所有方面都被视为与空格(U+0020)相同。
注意: 对于 HTML 文档,
源代码中存在的回车符
在解析阶段会转换为换行符
(参见 HTML
§ 13.2.3.5 预处理输入流 和 规范化换行符的定义,
参见 Infra),因此不会作为 U+000D 回车符显示给 CSS。[HTML] [INFRA])
然而,当使用转义序列(
)编码时,字符会被保留,且上述规则可以被观察到。
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
-
此值指示用户代理“丢弃”
元素中的所有空白字符。
此操作是否保留换行机会?我们是否需要一个单独的“隐藏”值? 如果它保留换行机会, 也许它应该被替换为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 > 一些 预格式化的 文本</ pre >
< pre > 一些 预格式化的 文本</ pre >
一些 预格式化的 文本
如果我们将其应用于行内元素:
span { white-space: normal; white-space-trim: discard-inner; }
开始[< span > 一些 行内 文本</ span > ]结束
开始[< span > 一些 行内 文本</ span > ]结束
开始[一些行内文本]结束
对于 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.1 § 9.2.2.1 匿名内联框 [CSS2]),
在内联格式化上下文中,空白字符在换行处理和双向重排之前进行如下处理,忽略双向格式化字符(具有Bidi_Control
属性的字符 [UAX9]),就好像它们不存在一样:
- 如果white-space-collapse 设置为 collapse 或 preserve-breaks,空白字符 被视为可折叠空白并按照以下步骤处理:
- 如果white-space-collapse 设置为 preserve-spaces, 每个制表符和段落分隔符会被转换为 空格。
- 如果white-space-collapse 设置为 preserve 或 preserve-spaces, 任何空格序列被视为不可断开的空格序列,除了在每个最大的空格和/或制表符序列的末尾存在软换行机会。 对于break-spaces, 在每个空格和每个制表符之后都有一个软换行机会。
<ltr>A <rtl> B </rtl> C</ltr>
其中<ltr>
元素表示从左到右的嵌入,<rtl>
元素表示从右到左的嵌入。
如果white-space属性设置为normal,
空白处理模型将导致以下结果:
这会在 A 和 B 之间留下两个空格, 而在 B 和 C 之间没有空格。 最终结果会按照 Unicode 双向算法重新排序文本:
A BC
注意 A 和 B 之间会有两个空格, 而 B 和 C 之间没有空格。 最好避免这种情况,通过将空格放在元素外部,而不是放在开标签和闭标签内部, 并且在可行的情况下, 通过依赖隐式双向性而不是显式嵌入级别来实现。
4.3.2. 阶段 II:修剪与定位
然后,整个块被渲染。 内联元素根据双向重排的规则布局, 并根据换行规则布局, 由text-wrap-mode和text-wrap-style属性指定。 当每行被布局时,
- 移除行首的可折叠空格序列。
- 如果制表符大小为零,保留的 制表符不会被渲染。 否则,每个保留的制表符会被渲染为一个水平位移,使得下一个字符的起始边与下一个制表符停靠点对齐。 如果这个距离小于 0.5ch, 则使用下一个制表符停靠点。制表符停靠点出现在从起始内容边缘到最近的块容器祖先的距离为制表符大小的倍数的地方。 制表符大小由tab-size属性指定。
- 移除行尾的可折叠空格序列,以及任何尾随的 U+1680 OGHAM 空格标记,
其white-space-collapse属性为collapse或preserve-breaks。
注意: 由于 Unicode Bidirectional Algorithm 规则L1的存在, 行尾在双向重排之前的可折叠空格序列, 在重排之后仍会处于行尾。[UAX9] [CSS-WRITING-MODES-4]
- 如果在行尾(双向重排后)仍然存在空白字符、其他空白分隔符或保留的制表符序列:
- 如果white-space-collapse为collapse或preserve-breaks, UA 必须无条件地悬挂该序列。
- 如果white-space-collapse设置为preserve,且text-wrap-mode未设置为nowrap,
则 UA 必须(无条件地)悬挂该序列,
除非该序列后跟一个强制换行,在这种情况下,必须有条件地悬挂该序列。
它还可以选择视觉上折叠任何本来会溢出的字符宽度。
注意: 悬挂空白而不是折叠它,可以让用户在选择或编辑文本时看到空白。
- 如果white-space-collapse设置为break-spaces,
空格、制表符和其他空白分隔符
与其他可见字符一样处理:
它们不能悬挂,也不能折叠其宽度。
注意: 这些字符因此占用空间, 根据可用空间和适用的换行控制,它们要么溢出,要么导致换行。
在 white-space-collapse: preserve-spaces的情况下应该发生什么?
p {
white-space : pre-wrap;
width : 5 ch ;
border : solid 1 px ;
font-family : monospace;
text-align : center;
}
< p > 0</ p >
上面的示例将渲染如下:
由于最后的空格位于强制换行之前 且没有溢出, 所以它不会悬挂, 居中对齐效果如预期。
p {
white-space : pre-wrap;
width : 3 ch ;
border : solid 1 px ;
font-family : monospace;
}
< p > 0 0 0 0</ p >
上面的示例将渲染如下:
0 0
0
如果添加了p
,
则结果将如下:
0 0
0
由于无强制换行的行尾保留的空格必须悬挂, 它们在文本对齐时不会被考虑。 当对齐到末尾时, 这意味着这些空格将溢出, 并且不会阻止行的其他内容与行的边缘对齐。 另一方面, 行尾带有强制换行的保留空格有条件地悬挂。 在这个例子中,最后一行末尾的空格没有溢出, 因此它不会悬挂,因此在文本对齐时会被考虑。
p {
white-space : pre-wrap;
width : 3 ch ;
border : solid 1 px ;
font-family : monospace;
}
< p > 0 0 0 0</ p >
0 0
最后一行不会在最后一个0
之前换行,因为有条件悬挂的字符在测量行内容以适应时不被考虑。
4.3.3. 段落分隔符转换规则
当white-space-collapse未设置为collapse时,段落分隔符不可折叠。 对于除collapse 或preserve-spaces(将其转换为 空格)以外的值,段落分隔符将被转换为保留的换行符(U+000A)。
当white-space-collapse设置为collapse时,段落分隔符可折叠, 并按以下规则进行折叠:
- 首先,任何可折叠的段落分隔符紧跟另一个可折叠的段落分隔符后出现时,将被删除。
- 然后,剩余的段落分隔符要么转换为空格(U+0020), 要么根据前后文进行删除。 本级别中,此操作的规则由用户代理(UA)定义。
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)的进位宽度为单位的度量,包括其关联的字母间距和 单词间距。 负值不允许。
5. 文本换行
当行内级内容被布局成多行时,它会被分割到不同的行框中。 这样的分割称为换行。 当由于显式的换行控制(例如保留的换行符) 或者由于块的开始或结束导致的换行,称为强制换行。 当由于内容的换行(即用户代理为了适应内容在规定的宽度内而创建的非强制性换行)而换行时, 称为软换行。 将行内级内容分割成多行的过程称为换行过程。
换行只能在允许的断点处进行, 该断点称为软换行机会。 当启用换行时(见white-space), 用户代理必须通过在软换行机会处换行, 来尽量减少内容溢出行的情况,如果存在这样的机会。
文本允许换行的位置由 换行规则和控制决定;是否允许换行以及如何在一行内优先处理多个 软换行机会, 则由text-wrap-mode、 text-wrap-style、 wrap-before、 wrap-after、 和wrap-inside属性控制。
5.1. 决定是否换行: text-wrap-mode 属性
名称: | text-wrap-mode |
---|---|
值: | wrap | nowrap |
初始值: | wrap |
适用对象: | 文本 |
是否继承: | 是 |
百分比: | 不适用 |
计算值: | 指定的关键字 |
规范顺序: | 按语法 |
动画类型: | 按计算值类型 |
此属性名称为占位符, CSSWG 可能会在未来找到更好的名称。
注意: 此属性是 长手属性, 包含white-space 和 text-wrap。
此属性指定行是否可以在非强制的软换行机会处换行。 可能的值:
- wrap
-
内容可以在允许的软换行机会处换行,
根据生效的换行规则,
以减少内联轴溢出。
注意: 参见§ 5.6 换行细节,了解有关软换行机会的规则和限制。
- nowrap
- 行内级内容不换行; 超出块容器宽度的内容将会溢出。
无论 text-wrap-mode 的值如何,保留的 段落断点,
以及任何具有 BK
、CR
、LF
和 NL
换行类的 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>第27届国际化与 Unicode 会议</venue> • <date>2005年4月7日</date> • <place>德国柏林</place> </footer>
在较窄的窗口中,页脚可能会被断行为
第27届国际化与 Unicode 会议 • 2005年4月7日 • 德国柏林
或者在更窄的窗口中断行为
第27届国际化与 Unicode 会议 • 2005年4月7日 • 德国柏林
但不会断行为
第27届国际化与 Unicode 会议 • 2005年 4月7日 • 德国柏林
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 |
初始值: | auto |
适用对象: | 建立内联格式化上下文的块容器 |
是否继承: | 是 |
百分比: | 不适用 |
计算值: | 指定的关键字 |
规范顺序: | 按语法 |
动画类型: | 离散 |
当允许换行时 (见 text-wrap-mode), 此属性选择多种换行方式, 在速度、布局质量和样式或稳定性之间进行权衡。 它不会更改哪些软换行机会存在, 但会更改用户代理在这些机会中做出选择的方式。 可能的值包括:
- auto
- 选择换行点的算法由用户代理定义。 算法可能会考虑多行进行断行决策。 用户代理可以偏向速度而非最佳布局。 用户代理不能试图使所有行(包括最后一行)均匀分布,如 balance。 此值选择用户代理首选(或与Web兼容性最好的)换行算法。
- balance
- 选择换行点时,尽量平衡每个行框中的剩余(空)空间,
如果比auto可能实现更好的平衡。
这应避免更改(在5行或更少的情况下,不能更改)块中包含的行框数量,
如果text-wrap 设置为 auto。
注意:行框的高度可能会改变, 因为行中出现的内容可能发生变化。
在考虑剩余空间时, 是在放置浮动和内联内容后, 但在任何由于文本对齐调整之前。 行框被平衡的标准是每个行框中剩余空间的 内联大小的标准差被减少。 (包括以强制换行结束的行)。
被 强制换行 分隔的行组被分别处理。 如果该元素受 line-clamp影响, 则在应用裁剪效果后, 剩余的行才会被平衡。
具体算法由用户代理定义。
如果有超过十行需要平衡, 用户代理可以将此值视为 auto。
- stable
- 指定在做出断行决策时,后续行的内容不应被考虑, 以确保编辑文本时,光标之前的任何内容保持稳定; 否则与 auto 相同。
- pretty
- 指定用户代理应在做出断行决策时偏向更好的布局, 而不是速度, 并且应考虑多行。 否则与 auto 相同。
注意: auto 值通常对应 Web 浏览器快速的传统断行算法, 这些算法通常使用先适应/贪婪算法, 结果往往不够理想。 用户代理可以使用此默认值实验更好的断行算法, 但由于最优结果通常需要更多时间,pretty 提供了 opt-in 选项, 以牺牲速度换取更好的结果。 pretty 值旨在用于正文文本, 其中最后一行的长度预期会比平均行短一些; balance 值旨在用于标题和说明, 这些情况下更喜欢等长的文本行; 而 stable 旨在用于某些可能会被切换为可编辑的部分。
- 至少与文本缩进一样长。
- 至少 X 个字符。
- 基于百分比。
建议的值空间为 match-indent | <length> | <percentage>(以 Xch 为例,说明该用例)。 或者可以使用<integer> 来实际计算字符数。
目前还不清楚这将如何与文本平衡(上文)交互; 早期的一个提议是让它们成为同一个属性 (100% 表示完全平衡)。
有些人提出了基于单词限制的请求,但由于这实际上取决于单词的长度,基于字符的限制会更好。
5.5. 联合换行控制:text-wrap 速记属性
名称: | text-wrap |
---|---|
值: | <'text-wrap-mode'> || <'text-wrap-style'> |
初始值: | wrap |
适用于: | 见个别属性 |
是否继承: | 见个别属性 |
百分比: | 见个别属性 |
计算值: | 见个别属性 |
规范顺序: | 按语法 |
动画类型: | 见个别属性 |
该属性是 text-wrap-mode 和 text-wrap-style 属性的速记写法。 任何省略的 长写属性 都会设置为其 初始值。
5.6. 换行细节
在确定 换行时:
- 换行 和双向文本的交互由 CSS Writing Modes 4 § 2.4 应用双向重排序算法 和 Unicode 双向算法 (UAX9§3.4 重排序解决级别) 定义。[CSS-WRITING-MODES-4] [UAX9]
- 除非明确定义为其他情况
(例如 line-break: anywhere 或 overflow-wrap: anywhere),
必须遵守 Unicode 换行类
CM
、SG
、WJ
、ZW
、GL
、 和ZWJ
的换行行为。[UAX14] - 在允许断行时 UA 应优先考虑断点, (例如,在使用斜杠后的断行优先级低于空格时, 序列“check /etc”永远不会在 "/" 和 "e" 之间断行。) 只要小心避免这些尴尬的断行, 允许在适当的标点符号处断行是推荐的, 尤其在窄宽度中,会产生更均匀的边距效果。 UA 可以根据包含块的宽度、文本的语言、 line-break 属性, 以及其他因素来分配优先级: CSS 未定义 软换行机会 的优先级。 但如果指定了 word-break: break-all, 则不期望对 单词分隔符 进行优先级处理, 因为这个值明确要求的换行行为 不是基于在 单词分隔符 处断行的——并且在 line-break: anywhere 下是被禁止的。
- 浮动元素 和行内元素的边界 不会引入 强制换行 或 软换行机会。
- 为了 Web 兼容性, 在每个替换元素或其他 原子行内元素 之前和之后存在一个 软换行机会, 即使它们与通常抑制换行的字符相邻, 包括 U+00A0 不间断空格。 但是, 除了 U+00A0 不间断空格之外, 原子行内元素 与相邻的属于 Unicode GL、WJ 或 ZWJ 换行类的字符之间不得存在 软换行机会。[UAX14]
- 由字符产生的 软 换行机会, 在换行时消失(例如 U+0020 空格), 直接包含该字符的盒子的属性 控制该换行机会的换行。 对于由两个字符或 原子行内元素 之间的边界定义的 软换行机会, 最近的公共祖先元素的 white-space 属性 控制换行; 哪些元素的 line-break、word-break 和 overflow-wrap 属性 控制在这些边界处的 软换行机会 的确定 在此级别中是未定义的。
- 对于盒子的第一个字符之前 或最后一个字符之后的 软 换行机会, 换行发生在盒子之前或之后(在其边缘处), 而不是在内容和内容边缘之间断开盒子。
- Ruby 注释中的换行 定义在 CSS Ruby 注释布局 1 § 3.4 跨行换行 中。[CSS-RUBY-1]
- 当在字内的无强制 软换行机会 处断开时, (例如当因 word-break: break-all、line-break: anywhere、overflow-wrap: break-word、overflow-wrap: anywhere 断行时, 或当 使用连字符断行 时), 必须仍然按照单词未断开的情况进行字符成型 (选择它们的连接形式)。
6. 换行与单词边界
在大多数书写系统中, 如果没有连字符连接,软换行机会仅出现在单词边界。 许多此类系统使用空格或标点符号 来明确分隔单词, 软换行机会可以通过这些字符识别。
然而,泰语、老挝语和高棉语等文字, 并不使用空格或标点符号来分隔单词。 尽管在这些文字中可以使用零宽度空格 (U+200B) 作为显式单词分隔符, 这种做法并不常见。 因此,需要词汇资源来正确识别这些文本中的软换行机会。
在某些其他书写系统中,软换行机会基于正字法音节边界, 而不是单词边界。 其中一些系统, 尤其是爪哇语和巴厘语等婆罗米文字, 需要分析文本以找到断行机会。 与使用 SA 换行类字符的语言不同, 这种分析不依赖于 内容语言,也不需要(特定语言的)单词边界检测或词汇资源。
在其他一些如中文(以及日语、彝语,有时还包括韩语)中, 每个音节往往对应一个字形单位, 因此换行规则允许在任何地方断行 除非在某些字符组合之间。 此外,这些限制的严格程度 随排版风格而异。
虽然 CSS 未完全定义 软换行机会 出现的位置, 但提供了一些控制来区分常见的变化:
- line-break 属性允许选择不同级别的“严格性” 来限制换行。
- word-break 属性控制哪些类型的字母 被组合在一起形成不可断开的“单词”, 使 CJK 字符的行为像非 CJK 文本或反之亦然, 从而能够控制东南亚语言中的单词检测, 或允许将单词分组成短语……
- hyphens 属性控制是否允许自动连字符 断开使用连字符的文字中的单词。
- overflow-wrap 属性允许 UA 在 其他情况下不可断开的字符串中断行, 如果字符串会溢出。
注意:Unicode Standard Annex #14: Unicode Line Breaking Algorithm 定义了所有 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 控制是否允许相邻的软换行机会存在,
将非字母的字形字符单元归为NU
、
AL
、AI
或ID
Unicode 换行类,
仅用于此目的,将它们视为字形字母单元。[UAX14]

另一个例子是韩语的两种断行方式: 在任何两个韩文音节之间断行(word-break: normal) 或像英文一样主要在空格处断行(word-break: keep-all)。
각 줄의 마지막에 한글이 올 때 줄 나눔 기 준을 “글자” 또는 “어절” 단위로 한다.
각 줄의 마지막에 한글이 올 때 줄 나눔 기준을 “글자” 또는 “어절” 단위로 한다.
埃塞俄比亚文同样有两种断行风格, 要么只在单词分隔符处断行(word-break: normal), 或者在单词内部字母之间也允许断行(word-break: break-all)。
ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡ በማዕረግ፡ወብሕግ።ቦሙ፡ኅሊና፡ወዐቅል፡ ወይትጌበሩ፡አሐዱ፡ምስለ፡አሀዱ፡ በመንፈሰ፡እኍና።
ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡በማ ዕረግ፡ወብሕግ።ቦሙ፡ኅሊና፡ወዐቅል፡ወይትጌ በሩ፡አሐዱ፡ምስለ፡አሀዱ፡በመንፈሰ፡እኍና።
值的含义如下:
- normal
-
单词按照它们的惯常规则断行,
如上文所述。
韩语通常表现出两种不同的行为,
允许在任何两个连续的韩文/汉字之间断行。
对于埃塞俄比亚文,也有两种不同的行为,
不允许在单词内部断行。
某些书写系统需要特定的处理 以获得惯常预期的软换行机会, 如§ 6.1.1 分析性单词断行中所述。
- break-all
-
允许在“单词”内部断行:
特别地,
除了软换行机会之外,
允许在 normal,
任何 字形字母单元 (和任何 字形字符单元 解析为
NU
(“数字”),AL
(“字母”),SA
(东南亚) 换行类 [UAX14]) 反而被视为ID
(“表意字符”), 用于断行。 不应用连字符。注意: 此值不影响 标点符号周围是否存在软换行机会。 要允许任何地方的换行,请参阅line-break: anywhere。
注意: 此选项启用了埃塞俄比亚文的另一种常见行为。 它也通常用于以 CJK 字符为主的文本中 只有简短的非 CJK 片段, 并希望文本在每行上更好地分布。
- keep-all
-
禁止在“单词”内部断行:
在软换行机会之间
隐式存在字形字母单元(或其他 字形字符单元 属于
NU
、AL
、AI
、 或ID
Unicode 换行类 [UAX14]) 之间被抑制, 即禁止在此类字符对之间断行 (无论 line-break 设置如何,除非指定为 anywhere) 除非存在机会由于 § 6.1.1.1 词汇性单词断行。 否则此选项等同于normal。 在这种风格中,CJK 字符序列不打断。注意: 这是韩语的另一种常见行为 (它在单词之间使用空格), 这对于混合脚本的文本也很有用,在混合文本中 CJK 片段与另一种使用空格分隔单词的语言混合。
- manual
-
表现与normal相同,
除非 § 6.1.1.1 词汇性单词断行必须不执行。
特别地,字形字符单元的 SA 类在 [UAX14]中
必须被视为 AL 类,
(即假设值为 line-break,除了 anywhere之外,
不存在 软换行机会
在此类字符对之间)。
注意: 此值不影响 像巴厘语这样的语言中的音节级软换行机会。 (有关此类书写系统的讨论,请参阅§ 6.1.1.2 正字断行。)
或者, 此值可以基于 keep-all 而不是 normal。 另一种变体是将此行为与 keep-all 合并。
注意: 一些东南亚语言通常被用户代理错误检测。 使用 word-break: normal, 它们然后应用不合适的特定语言逻辑 来查找换行机会, 并在不合适的地方放置它们。例如, 除泰语外,许多语言使用泰文字母书写, 而像泰语那样断行通常会产生不合适的甚至令人困惑的结果。
当发生这种情况时, 此值使作者能够关闭 内置于用户代理中的单词边界检测 对于word-break: normal, 以便他们可以手动标记文本以指示换行机会 并获得合理的结果。
- auto-phrase
-
表现与normal相同,
除非此值指示用户代理执行特定语言的内容分析,
优先将自然短语(多个单词的短语)保持在一起。
如果元素的内容语言未知, 或者如果用户代理不知道如何为特定语言检测短语边界, 则此值必须表现为normal。 否则, 用户代理应 检测短语边界 并在每个短语内抑制软换行机会。
无论内容语言和对短语边界检测的支持如何,连字符机会将被抑制, 就像指定了hyphens: none。
注意:为一种语言设计的单词边界检测系统 是否适用于该语言的某些或所有方言是主观的, 本规范将其留给用户代理的自行裁量。 即使检测系统不能应对某些方言的所有细微差别, 如果检测能大多数情况下正确识别单词边界, 也可能合理地声称支持。 但是,如果用户代理声称支持某些语言, 而它未能检测到大多数单词边界或错误率很高, 那将对作者和用户造成伤害。如果用户代理拥有针对粤语的单词边界检测系统, 但该系统不适用于更广泛的汉语, auto-phrase应对标记为 lang=yue、lang=zh-yue 或 lang=zh-HK 的内容产生效果, 而不是lang=zh 或 lang=zh-Hant。然而,如果用户代理支持适用于普通汉语的通用单词边界检测系统, auto-phrase 应对标记为广泛 lang=zh 的内容产生效果, 以及更具体的标记, 例如 lang=zh-yue、lang=zh-Hant-HK、 lang=zh-Hans-SG 或 lang=zh-hak。
符号与特定类别的字母具有相同的换行方式时,受相同的规则影响。
用户代理在响应此属性的任何值时,不能抑制以下软换行机会:
-
由
wbr
HTML 元素或 U+200B 零宽度空格引入 -
由line-break 属性要求
注意: 要控制仅在溢出时可用的其他换行机会,请参阅 overflow-wrap。
word-break 的效果在计算固有大小时会被考虑。
这是一些汉字 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·و·کمی·خط·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย·በጽሑፍ፡·ማራዘሙን፡·አንዳንድ፡
当允许诸如阿拉伯文的整形书写系统中的单词中断时,例如 break-all,字符必须仍然按照未中断时的方式整形。参见。
为了与旧内容兼容, word-break 属性还支持已弃用的 break-word 关键字。 当指定时,其效果与 word-break: normal 和 overflow-wrap: anywhere 相同, 无论 overflow-wrap 属性的实际值如何。
6.1.1. 分析性词语断行
6.1.1.1. 词汇性词语断行
为了为东南亚语言提供预期的 normal 行为,具有 SA 换行类的 字形字符单元在[UAX14] 中必须被视为具有 AL 类。 但是,用户代理还必须分析这些字符的内容 以检测词语边界,并将每个边界视为 软换行机会。
由于各种语言可以使用带有 SA 类字符的脚本编写, 如果已知内容语言, 用户代理应使用此信息来定制其分析。
6.1.1.2. 正字法断行
对于使用基于正字法音节断行的脚本(例如巴厘文),用户代理必须分析内容以找到插入正确的 软换行机会 的点。
注意: 在撰写本文时, Unicode 尚未定义如何执行此分析,并将这些书写系统中的所有字符视为具有 AL 类。 但是,已有提案 解决该问题。 虽然尚未最终确定,但可以参考它作为有用的信息。[L2-22-080R]
6.1.1.3. 回退断行
为了避免意外溢出,如果用户代理无法执行词汇或正字法分析来断行任何需要它的 内容语言(例如由于缺少针对使用 SA 类字符编写的语言的字典),它必须假设该书写系统中的 字形字符单元 之间存在 软换行机会。
注意: 此规定不会仅在用户代理未能在特定文本段中找到词语边界时触发;该文本段很可能是单个不可拆分的单词。 它适用于例如由高棉字符(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
- 用户代理决定要使用的换行限制集,可能会根据行的长度调整限制;例如,对于较短的行使用较少限制的换行规则。
- loose
- 使用最少限制的换行规则来分隔文本。通常用于报纸等短行文本。
- normal
- 使用最常见的换行规则分隔文本。
- strict
- 使用最严格的换行规则分隔文本。
- anywhere
-
每个排版字符单元之间,包括标点符号或保留的空格,以及单词内部,都会有软换行机会,
即使字符有
GL
、WJ
或ZWJ
换行类别或由word-break属性强制的换行限制,也会被忽略。 不同的换行机会不会优先处理。不会应用连字符。注意: 此值触发的换行规则通常在终端中看到。
注意: 此值只会在排版字符单元之间产生软换行机会,而不是单元内。 因此,必须遵守
CM
和SG
的Unicode换行类别。[UAX14]注意:anywhere 只允许行末的保留空格换到下一行, 当white-space属性设置为break-spaces时生效,因为在其他情况下:当它对保留空格有效时,配合white-space: break-spaces, 允许在空格序列的第一个空格之前换行,而break-spaces本身并不允许这样做。
CSS 区分了四个级别的文本换行规则严格性。 每个级别的具体规则(如loose、normal 和 strict)由用户代理决定,并应遵循语言惯例。 不过,本规范要求:
- 在 strict 换行规则中禁止的换行,在 normal 和 loose 中允许:
- 在日文的小假名或片假名-平假名长音符号(即Unicode换行类别
CJ
中的字符)前换行。[UAX14]
- 在日文的小假名或片假名-平假名长音符号(即Unicode换行类别
- 当 书写系统
是 中文 或 日文
时,允许在 normal 和 loose 中换行,否则禁止:
- 在某些类似破折号的 CJK 字符之前换行:
〜 U+301C, ゠ U+30A0
- 在某些类似破折号的 CJK 字符之前换行:
- 如果前一个字符属于Unicode换行类别
ID
,则允许在 loose 中换行,否则禁止:- 在连字符之前换行:
‐ U+2010, – U+2013
- 在连字符之前换行:
- 在 normal 和 strict 换行中禁止的换行,在 loose 中允许:
- 在重复标记之前换行:
々 U+3005, 〻 U+303B, ゝ U+309D, ゞ U+309E, ヽ U+30FD, ヾ U+30FE - 在不可分割字符(如 ‥ U+2025, … U+2026)之间换行,即 Unicode 换行类别
IN
的字符。[UAX14]
- 在重复标记之前换行:
- 当 书写系统 是 中文 或 日文 时,允许在 loose 中换行,否则禁止:
注意: 上述要求仅在 CJK 文本中创建区分。 在仅匹配上述规则、没有其他规则的实现中,line-break 仅会影响 CJK 代码点,除非书写系统标记为 中文 或 日文。 未来的级别可能会为其他书写系统和语言添加更多具体规则,以满足其要求。
-
不要在 U+0021 (感叹号
!
) 和字母 (Unicode 通用类别L
) 之间引入断行机会。 这可以防止在字符串 “!important” 中断行。 -
不要在 U+002F (斜线
/
) 和字母 (Unicode 通用类别L
) 之间引入断行机会。 这可以防止在日期如 “23/Jan/2024” 中断行。 -
不要在 U+007C (竖线
|
) 和字母 (Unicode 通用类别L
) 之间引入断行机会。 -
不要在 U+002D (连字符-减号 `-`) 和数字 (Unicode 通用类别
Nd
) 之间引入断行机会,除非连字符前的代码点是字母或数字 (Unicode 通用类别L
或Nd
)。 这可以防止在表示负数如 “-13” 中断行,同时允许在 “ABCD-1234” 和 “1234-5678” 中的连字符后断行,这类可能出现在长 URL 中。
注意: CSS 工作组认识到在本规范的未来版本中,可能需要更细致的断行控制,以满足高端出版要求。
6.3. 连字符断词:词内形态断行
6.3.1. 连字符控制:hyphens 属性
连字符断词 是对不允许断行的位置进行受控的单词分割,以改进段落布局,通常在音节或词素边界处分割单词,并且通常会在视觉上指示分割(通常插入连字符,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 | |
维吾尔语 | | | |
克里语 | | | |
连字符断词发生在行断开于有效的 连字符断词机会 处, 这是 软断行机会 的一种,存在于允许连字符断词 的单词内部。 在 CSS 中,连字符断词机会 由 hyphens 属性控制。 CSS Text Level 3 并未定义精确的 连字符断词 规则; 然而,强烈建议 UA 优化断点选择并选择适合语言的连字符断词点。
注意: 由 U+002D - HYPHEN-MINUS 字符或 U+2010 ‐ HYPHEN 字符引入的 软断行机会 不是 连字符断词机会,因为在换行时不会创建分割的视觉指示: 这些字符在换行与否时均是可见的。
在计算 最小内容固有大小 时,会考虑连字符断词机会。
注意: 这允许表格连字符断词其内容,而不是溢出其包含块, 这在像德语这样的长单词语言中特别重要。
名称: | hyphens |
---|---|
值: | none | manual | auto |
初始值: | manual |
应用于: | 文本 |
继承属性: | 是 |
百分比: | n/a |
计算值: | 指定的关键字 |
规范顺序: | n/a |
动画类型: | 离散 |
该属性控制是否允许连字符断词以在文本行内创建更多的软断行机会。 其值具有以下含义:
- none
- 单词不会断开,即使单词内部的字符明确定义了连字符断词机会。
注意: 这不会抑制由始终可见的字符(如 U+002D - HYPHEN-MINUS 或 U+2010 ‐ HYPHEN)引入的现有软断行机会。
- manual
- 单词只在单词内部存在明确建议连字符断词机会的字符处断开。 UA必须使用适当的语言特定连字符,并应在相同位置应用任何适当的拼写变化,就像自动连字符断词一样。
- auto
- 单词可以在由语言适配的连字符断词资源自动确定的连字符断词机会处断开,除此之外,还可以在通过条件连字符明确指出的地方断开。 如果单词中包含条件连字符(­或 U+00AD SOFT HYPHEN),则必须忽略单词中其他地方的自动连字符断词机会,优先使用条件连字符。 然而,如果即使在这些机会处断开后,单词的某部分仍然太长而无法放入一行,则可以使用自动连字符断词机会。
正确的自动连字符断词需要适合文本语言的连字符断词资源。因此,UA 只能自动对其内容语言已知且有适当连字符断词资源的文本进行连字符断词。
UA可以使用语言定制的启发式方法排除某些单词不进行自动连字符断词。例如,UA可能会尝试通过排除匹配特定大写和标点模式的单词,避免在专有名词中进行连字符断词。 这些启发式方法并未在此规范中定义。(请注意,这些启发式方法需要根据语言变化:例如,英语和德语的大小写惯例非常不同。)
就hyphens属性而言,什么构成“单词”取决于UA。然而,在确定单词边界时,必须忽略内联元素边界和流外元素。
由于条件连字符字符(例如U+00AD SOFT HYPHEN)创建的连字符断词机会显示的任何字符,都是由该字符表示的,并根据应用于该字符的属性进行样式设置。
当允许使用连字符断词的情况下,像阿拉伯语这样进行字形连接的脚本即使在单词内部断开,字符仍必须按照未断开的方式进行字形连接。
6.3.2. 连字符:hyphenate-character属性
名称: | hyphenate-character |
---|---|
值: | auto | <string> |
初始值: | auto |
应用于: | 文本 |
继承: | 是 |
百分比: | 不适用 |
计算值: | 指定的关键字 |
规范顺序: | 按照语法 |
动画类型: | 离散的 |
该属性指定在断词时显示的字符串。 其值具有以下含义:
- auto
- 指定用户代理应根据内容语言的排版惯例找到适当的字符串,可能与连字符词典来自同一来源。
- <string>
- 指定断词时出现在断词处的字符串。
(该字符串的位置不受影响:UA必须根据内容语言的排版惯例插入字符串,默认插入到断词断点之前。)
UA可以将使用值截断为有限数量的排版字符单元;但不得只截断部分排版字符单元。
注意:指定空字符串""是有效的, 会使UA在连字符断词机会处断开,但不会插入可见的连字符字符。
[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 |
应用于: | 文本 |
继承: | 是 |
百分比: | n/a |
计算值: | 三个值,每个值为 auto 关键字或一个整数 |
规范顺序: | 依语法而定 |
动画类型: | 按计算值类型 |
该属性指定连字符断字的最小字符数。如果单词不满足单词 / 连字符前 / 连字符后的最小字符数要求,则不能对该单词进行连字符断字。 非间隔组合符号(Unicode通用类别Mn)和词内标点符号(Unicode通用类别P*)不计入最小字符数。
如果指定了三个值,第一个值是整个单词的最小字符数,第二个值是连字符点前的最小字符数,第三个值是连字符点后的最小字符数。如果第三个值省略,则与第二个值相同;如果第二个值省略,则为 auto。auto 的值表示UA选择一个适应当前布局的值。
注意:除非UA能够计算出更好的值,否则建议 auto 的值为单词总字符数为5,连字符前和后的字符数为2。
p { hyphenate-limit-chars: auto 3; }
6.3.5. 连字符行限制:hyphenate-limit-lines 和 hyphenate-limit-last 属性
名称: | hyphenate-limit-lines |
---|---|
值: | no-limit | <integer> |
初始值: | no-limit |
应用于: | 块容器 |
继承: | 是 |
百分比: | n/a |
计算值: | 指定的关键字或整数 |
规范顺序: | 依语法而定 |
动画类型: | 按计算值类型 |
此属性指示元素内连续连字符断行的最大行数。值 no-limit 表示没有限制。
在某些情况下,用户代理可能无法遵守指定的值。(参见 overflow-wrap。)并未定义由于此类紧急断行引入的连字符是否影响附近的连字符断点。
名称: | hyphenate-limit-last |
---|---|
值: | none | always | column | page | spread |
初始值: | none |
应用于: | 块容器 |
继承: | 是 |
百分比: | n/a |
计算值: | 指定的关键字 |
规范顺序: | 依语法而定 |
动画类型: | 离散 |
此属性指示在元素末尾、列、页面和跨页断点处的连字符行为。跨页是一组同时对读者可见的两页。各值含义如下:
- none
- 没有限制。
- always
- 元素的最后一整行,或在元素内的任何列、页面或跨页断点前的最后一行不应使用连字符。
- column
- 在元素内的任何列、页面或跨页断点前的最后一行不应使用连字符。
- page
- 在元素内的页面或跨页断点前的最后一行不应使用连字符。
- 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-wrap/word-wrap 属性
名称: | overflow-wrap, word-wrap |
---|---|
值: | normal | break-word | anywhere |
初始值: | normal |
应用于: | 文本 |
继承: | 是 |
百分比: | 不适用 |
计算值: | 指定的关键字 |
规范顺序: | 无 |
动画类型: | 离散 |
此属性指定当行内某些本不可断开的字符串过长,无法适应行框时,用户代理是否可以在其他不允许断开的点进行断行,以防止溢出。仅在 white-space 允许 换行 时才有效。可能的值有:
- normal
- 行只可以在允许的断点处断开。
但是,word-break: keep-all 引入的限制可以放宽为与 word-break: normal 匹配,
如果该行没有其他可接受的断点。
此外,word-break: auto-phrase 引入的限制也会放宽, 如果该行没有其他可接受的断点:
- 如果在某个特定短语内抑制 软换行机会 会导致该短语即使放置在空行中也会溢出, 用户代理必须回退到该短语中的 软换行机会,与 normal 相同。
- 如果这还不足以防止溢出, 则也必须放弃每行内的 连字符机会 的抑制。
- 作为中间措施, 用户代理还可以检测多个级别的短语, 选择较短的短语 (可能缩小到单词), 当较长的短语会导致溢出时。
通过放宽 word-break: keep-all 和 word-break: auto-phrase 引入的限制获得的 软换行机会 不 在计算 最小内容固有尺寸 时考虑。
- anywhere
- 当行中没有其他可接受的断点时,可以在任意点断开本不可断开的字符序列。
字形字符仍会按未断开的方式进行排版,
且字形簇必须作为一个单元保持在一起。
断点处不会插入连字符。软换行机会 通过 anywhere 引入的
会被考虑 在计算 最小内容固有尺寸 时。
在 word-break: auto-phrase 的情况下, 仅在放宽 word-break: auto-phrase 的限制(如 overflow-wrap: normal 中所述)不足以防止溢出时, 才会引入这些额外的 软换行机会。
- break-word
- 类似于 anywhere,但通过 break-word 引入的 软换行机会 不会 在计算 最小内容固有尺寸 时考虑。
我们是否需要为 overflow-wrap 添加一个 none
值,以选择退出放宽 keep-all' 和 auto-phrase'' 限制
,如 overflow-wrap: normal 允许的那样?
由于遗留原因,用户代理必须将 word-wrap 视为 遗留名称别名,与 overflow-wrap 属性相同。
7. 对齐与两端对齐
对齐和两端对齐控制内联内容在行框中的分布方式。
7.1. 文本对齐:text-align 速记属性
名称: | text-align |
---|---|
值: | start | end | left | right | center | <string> | justify | match-parent | justify-all |
初始值: | start |
应用于: | 块容器 |
继承: | 是 |
百分比: | 参见各个属性 |
计算值: | 参见各个属性 |
动画类型: | 离散 |
规范顺序: | 无 |
此速记属性设置 text-align-all 和 text-align-last 属性, 并描述当内容未完全填充行框时, 块内联级内容如何沿内联轴对齐。 除了 justify-all 或 match-parent 以外的值 分配给 text-align-all 并将 text-align-last 重置为 auto。
值有以下含义:
- start
- 内联级内容与行框的 起始边对齐。
- end
- 内联级内容与行框的 结束边对齐。
- left
- 内联级内容与行框的 行左边对齐。 (在垂直书写模式中, 这可以是物理上的顶部或底部, 具体取决于 writing-mode。) [CSS-WRITING-MODES-4]
- right
- 内联级内容与行框的 行右边对齐。 (在垂直书写模式中, 这可以是物理上的顶部或底部, 具体取决于 writing-mode。) [CSS-WRITING-MODES-4]
- center
- 内联级内容在行框中居中对齐。
- <string>
- 该字符串必须是单个字符; 否则声明无效,必须被忽略。 当应用于表格单元格时,指定单元格内容将围绕其对齐的对齐字符。 有关详细信息以及此值如何与关键字结合,请参见下文。
- justify
- 根据 text-justify 属性指定的方法进行文本两端对齐, 以精确填充行框。 除非 text-align-last 另有指定, 否则在强制换行前的最后一行或块的末尾是 start 对齐。
- justify-all
- 设置 text-align-all 和 text-align-last 为 justify, 使最后一行也两端对齐。
- match-parent
-
该值的行为与inherit(计算为其父元素的计算值)相同,
但继承值为start或end时,会根据父元素的方向值解释,
并产生计算值为left或right。
在根元素上指定时,计算为start。
当在text-align简写中指定时, 会将text-align-all和text-align-last设置为match-parent。
文本块是行框的堆栈。 此属性指定行框内的内联级框如何相对于行框的起始和结束边对齐。 对齐不是相对于视口或包含块。
对于justify, 用户代理可以通过调整文本来拉伸或收缩任何内联框。 (参见 text-justify。) 如果元素的 空白 不是可折叠的, 则用户代理不需要为对齐目的调整其文本, 而可以将文本视为没有对齐机会。 如果用户代理选择调整文本, 则必须确保 制表位 按 空白处理规则 的要求对齐。
如果(包括对齐之后) 行框的内联内容过长而无法容纳, 则内容将 起始对齐: 任何无法容纳的内容都将溢出行框的 结束边。
详见 § 9.3 双向文本与行框 了解如何确定行框的 起始和结束边。
7.2. 表格列中的基于字符的对齐
当列中的多个单元格指定了对齐字符时, 该列中每个这样的单元格的对齐字符沿单个与列平行的轴居中, 列中的其余文本相应地移动。 (注意,字符串不必对每个单元格都相同, 尽管它们通常是相同的。)
这是为了说明应对齐对齐字符的中心吗? 这并不明确表达出来, 但需要指定这种行为(或其他行为), 以描述当对齐字符的不同出现位于不同字体中时会发生什么。 (此外,这是否是预期的行为?最重要的用例可能是粗体与非粗体文本, 它们的宽度差异不大。)
以下样式表:
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> 值 结合指定关键字值; 如果未给出,则默认为 右对齐。 该值用于:
- 当基于字符的对齐应用于不是表格单元格的框时。
- 当文本换行到多行(在未强制换行点)时。
- 当一个字符对齐的单元格跨越多个列时。 在这种情况下,关键字对齐值用于确定与哪个列的轴对齐: 最左列用于 左对齐, 最右列用于 右对齐 和 居中对齐, 最开始的列用于 起始对齐, 最后面的列用于 结束对齐。
- 当列足够宽时,仅字符对齐不足以确定其字符对齐内容的位置。 在这种情况下,列中第一个具有指定对齐字符的单元格的关键字对齐用于滑动字符对齐内容的位置, 尽可能与关键字对齐相匹配,而不改变列的宽度。 对于 居中对齐, 用户代理可以使用其极值居中对齐内容, 将对齐轴本身尽可能居中, 或通过其他方式光学居中对齐内容 (例如通过对单元格内容在轴两侧的范围取加权平均值)。
注意: 右对齐是字符对齐的默认值, 因为几乎所有的编号系统都是从左到右的, 即使是在从右到左的书写系统中, 而字符对齐的主要用例是用于数字对齐。
如果对齐字符在文本中出现多次, 则使用第一次出现的实例进行对齐。 如果单元格中根本没有出现对齐字符, 则字符串将像在其内容末尾插入对齐字符一样对齐。
需要指定搜索对齐字符的文本范围。 它只是在单元格的包含块中的流内文本吗? 还是考虑单元格中由流内子元素形成的块格式上下文中的文本? 如果是,那么只要其 text-align 属性 与单元格的一致是否就可以考虑? (是在对齐字符一致的情况下,还是完全一致?)
此行为将对齐字符 插入到内容末尾, 并结合字符中心对齐, 将在一行中的末端产生空隙, 当使用 <string> 文本对齐时, 当列中的任何一行没有对齐字符时, 或更重要的是,当某些行确实有对齐字符时, 但列未按其最大内容宽度布局。 这可能是不理想的。
当对齐字符插入到内容末尾时, 使用的是哪个字体? (特别是,如果对齐字符可能位于子块内, 使用的是块的字体还是表格单元格的字体? 或者如果插入位于内联元素中的强制换行处, 它使用的是内联元素的字体还是块或单元格的字体?)
基于字符的对齐发生在表格单元格宽度计算之前, 以便自动宽度计算可以为对齐留出足够的空间。 是否在宽度计算之前或之后参与对齐的列跨单元格未定义。 如果单元格内容的宽度限制 阻止了整个列中的完全对齐, 则结果对齐是未定义的。
这应该有一个正式的定义, 描述字符对齐如何影响 最小内容和最大内容的固有宽度 (表格列及其内部的所有内容)。 最大内容固有宽度需要分为三个数字(假设对齐字符的中心对齐): 一个用于没有对齐字符的宽度, 一个用于对齐字符中心的内联起始侧宽度, 一个用于对齐字符中心的内联结束侧宽度。 这基于强制换行之间的所有文本段来操作最大内容宽度。 对于最小内容宽度,在其中包含可选换行符的强制换行之间的文本段应仅贡献 没有对齐字符的宽度。 然而,尚不清楚是否所有最小内容宽度都应如此处理, 或者强制换行之间没有可选换行符的段落 (可能只有那些实际包含对齐字符的段落) 应为对齐字符起始侧和对齐字符结束侧的最小内容宽度做出贡献; 这种选择是表格的最小内容大小表示最窄合理尺寸与 在更多情况下尊重对齐字符之间的权衡。 另一种选择可能是使用是否允许可选换行符的换行 作为决定使用哪种行为的控制。
正式定义列跨单元格的固有宽度贡献 与 <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 简写属性的长属性指定块容器中所有行的内联内容对齐方式, 除非最后一行被auto 以外的 text-align-last 值覆盖。 参见 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 应尽可能使用适合文本的对齐算法。
书法对齐阿拉伯语文本示例,由 Tasmeem 渲染。 通过调整字间距或字形本身来对齐,提供高质量的对齐效果。 text-justify: auto 示例: 采用通用折中对齐方法,扩展空格和东南亚字母之间的间距。 - none
-
禁用对齐:文本中没有 对齐机会。
text-justify: none 示例 - inter-word
-
仅调整 词分隔符 处的间距。
这种行为通常用于以空格分隔单词的语言,如英语或韩语。
text-justify: inter-word 示例 - inter-character
-
两端对齐调整每对相邻的印刷字符单位之间的间距(实际上是改变行中使用的字间距)。
该值有时在如日文等东亚系统中使用。
带有text-justify: inter-character的混合书写系统文本 由于遗留原因, UA 还必须支持替代关键字distribute,其必须计算为inter-character, 因此具有完全相同的含义和行为。 UA 可以将其视为遗留值别名。
- ruby
-
对齐时除了禁用 词分隔符 和 注音字符 的对齐机会外,与
auto 一样。
注意: 此值用于 ruby 注释 的默认对齐方式。
- no-compress
-
禁止压缩 text-spacing-trim 或 text-autospace 控制的间距。
注意: 日本语对压缩规则的示例见 [JLREQ] 中的 3.8 章节。
由于最佳对齐是 语言 敏感的, 作者应正确标记其内容的语言以获得最佳效果。
注意: 本级别的 CSS 指南未描述完整的对齐算法, 仅提供应满足的最低要求, 允许 UA 选择符合其需求的对齐算法, 平衡质量、速度和复杂性。
7.5.1. 扩展和压缩文本
在对文本进行两端对齐时, 用户代理将行内容的末端与其行框的边缘之间的剩余空间分配到内容中, 以使内容完全填充行框。 用户代理也可以分配负空间, 在行内放置比正常间距条件下更多的内容。
对齐机会 是对齐算法可以改变文本间距的点。 对齐机会可以由单个 字形单元 (例如 词分隔符)提供, 也可以由两个 字形单元 的并置提供。 就像 软换行机会 的控制一样, 一个 字形单元 是否提供 对齐机会 由其父级的 text-justify 值控制; 同样, 是否在两个连续的 字形单元 之间存在 text-justify 决定了 最近公共祖先的值。
对齐分配的空间是 额外的,相对于由 字母间距 或 词间距 定义的间距。 当这样的额外空间分配给 词分隔符 对齐机会 时, 它按照与 词间距 相同的规则应用。 同样,当空间分配给两个 字形单元 之间的 对齐机会 时, 应按照 字母间距 的相同规则应用。
对齐算法可以将 对齐机会 分为不同的优先级。 在给定级别内的所有 对齐机会 都以相同的优先级进行扩展或压缩, 无论哪个 字形单元 创建了该机会。 例如, 如果 对齐机会 在两个汉字之间 和在两个拉丁字母之间被定义为同一级别 (如在 字符间 对齐样式中一样), 它们不会因来源于不同的 字形单元 而受到不同的处理。 本级别没有定义其他因素(如字体大小、字母间距、字形形状、行内位置等)是否或如何影响 行内 对齐机会 的空间分配。
UA 可以启用或断开可选连字 或使用其他字体特性 (例如替代字形或字形压缩) 来帮助根据任何方法对齐文本。 这种行为不受本级别的 CSS 控制。 然而, UA 不得 打破必需的连字 或禁用正确形状复杂脚本所需的功能。
如果一行中存在 对齐机会, 并且 文本对齐 指定了该行的全对齐 (justify), 则必须进行对齐。
7.5.2. 处理符号和标点符号
在确定 对齐机会 时, 来自 Unicode 符号(S*)和标点符号(P*)类的 字形单元 通常与相同脚本的 字形字母单元 处理方式相同 (或者,如果字符的脚本属性为 Common, 则作为主要脚本的 字形字母单元 处理)。
然而,按排版传统, 符号和标点符号的对齐可能有其他规则控制。 因此,UA 可能会重新分配特定字符 或引入额外的优先级级别 来处理涉及符号和标点符号的 对齐机会。
7.5.3. 不可扩展文本
如果行的内联内容无法拉伸至填满整个行框, 则必须按照 text-align-last 属性指定的方式对齐。 (如果 text-align-last 是 justify, 那么它们必须像 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 |
适用对象: | 块容器 |
是否继承: | 否 |
百分比: | 不适用 |
计算值: | 指定的关键字 |
规范顺序: | 按语法 |
动画类型: | 离散型 |
此属性将行框的内容作为一个组进行对齐,同时保持其文本对齐方式。
组对齐 通过找到剩余空间最小的行框来进行, 然后在该行框的一侧或两侧添加相同量的填充, 减少可用于其内容的空间;然后对其内容在剩余空间内应用 文本对齐。 所有在同一 块格式上下文中的后代 流内 行框都将被考虑在内, 无论是在搜索最小剩余空间时还是在添加填充时; 而建立了 独立格式化上下文 的后代内容则被跳过。
此属性的一个变体是继承的, 并且仅在每个块容器上单独应用, 只影响该块直接的行框。 这虽然不太实用,但可能更容易实现。
如果将源于同一块容器的浮动元素 也以相同的方式移动, 将使其排列得更整齐, 这对于 CJK 布局特别有价值。 具体如何实现,以及如何与来自祖先元素的浮动元素相互作用, 留待读者自行探索。
值具有以下含义:
- none
- 文本对齐正常进行:组对齐 不执行。
- start
- 内联级内容 组对齐 到 行内起始 侧, 通过在每个行框的 行内结束 侧添加填充实现。
- end
- 内联级内容 组对齐 到 行内结束 侧, 通过在每个行框的 行内起始 侧添加填充实现。
- left
- 内联级内容 组对齐 到 行左侧, 通过在每个行框的 行右侧 添加填充实现。
- right
- 内联级内容 组对齐 到 行右侧, 通过在每个行框的 行左侧 添加填充实现。
- center
- 内联级内容 组对齐 到中心, 通过在每个行框的两侧添加填充实现, 每侧分配一半的空间。
8. 间距
CSS 提供对常规文本间距的控制 通过 word-spacing、letter-spacing 和 line-padding 属性, 这些属性分别指定额外的空格 在 单词分隔符 之间的 排版字符单元, 或者行的起始/结束位置。 它还通过 text-spacing-trim 属性提供上下文控制间距, 该属性允许 CJK 标点的全宽与半宽设置之间的上下文调整; 以及 text-autospace 属性, 该属性允许在脚本更改或标点符号周围自动插入额外的空格。
8.1. 单词间距:word-spacing 属性
名称: | word-spacing |
---|---|
值: | normal | <length-percentage> |
初始值: | normal |
适用对象: | 文本 |
是否继承: | 是 |
百分比: | 相对于计算后的 字体大小,即 1em |
计算值: | 一个绝对长度和/或百分比 |
规范顺序: | 不适用 |
动画类型: | 通过计算值类型 |
该属性指定“单词”之间的额外间距。 其值的解释如下:
- normal
- 未应用额外的间距。 计算为零。
- <length-percentage>
-
指定额外的间距 附加于 字体定义的固有词间距。
注意: 百分比完整继承, 并相对于当前元素的计算 字体大小 计算 (因此代表相对于应用它的文本大小的大小), 不像 em 单位,它们相对于 其继承的元素的计算 字体大小 解析为绝对长度。
额外间距应用于 单词分隔符,在应用 空格处理规则 后保留的文本中, 并应当在字符的两侧各施加一半的间距, 除非排版传统另有规定。 值可以是负值,但可能存在实现依赖的限制。
单词分隔符字符 是 排版字符单元,其主要用途和一般用法是分隔单词。 在 Unicode 中,这包括 (但不限于) 空格 (U+0020), 不间断空格 (U+00A0), 埃塞俄比亚词间空格 (U+1361), 爱琴海词分隔符 (U+10100, U+10101), 乌加里特词分隔符 (U+1039F), 和腓尼基词分隔符 (U+1091F)。 [UNICODE]
注意: 标点符号通常不被视为 单词分隔符字符, 因为虽然它们通常用于分隔单词, 但它们的主要用途并不是分隔单词。
如果没有 单词分隔符字符, 或者单词分隔字符的前进宽度为零 (例如 U+200B 零宽空格), 则用户代理不得在单词之间创建额外的间距。
8.2. 字距: letter-spacing 属性
名称: | letter-spacing |
---|---|
值: | normal | <length-percentage> |
初始值: | normal |
适用对象: | 内联盒 和 文本 |
是否继承: | 是 |
百分比: | 相对于计算后的 字体大小,即 1em |
计算值: | 一个绝对长度和/或百分比 |
规范顺序: | 不适用 |
动画类型: | 通过计算值类型 |
该属性指定额外的字母间距 (通常称为 tracking) 在相邻的 排版字符单元 之间。 字母间距是在 双向重排 之后应用的,且附加于 字距调整 和 单词间距 之上。[CSS-WRITING-MODES-4] [CSS-FONTS-3] 根据生效的对齐规则, 用户代理可以进一步增加或减少 排版字符单元 之间的间距 以 对齐文本。
值的含义如下:
- normal
- 不应用额外的间距。计算为零。
- <length-percentage>
-
指定 额外 的字母间距
在 排版字符单元 之间。
值可以是负值,
但可能存在依赖于实现的限制。
注意: 百分比完整继承, 并相对于当前元素的计算 字体大小 计算 (因此代表相对于 应用它的文本大小的大小), 不像 em 单位,它们相对于 其继承的元素的计算 字体大小 解析为绝对长度。
由于 遗留原因,
计算后的 letter-spacing 值为零时
返回 解析值(getComputedStyle()
返回值)
为 normal。
对于 letter-spacing, 每个连续的 原子内联元素(例如图像和内联块) 作为单个 排版字符单元 处理。
字母间距不得应用于行的起始位置。 是否在行的末尾应用字母间距在该级别中未定义。
p{ letter-spacing : 1 em ; }
< p > abc</ p >
a b c
a b c
因此,用户代理 确实不应 [RFC6919] 在行的右侧或尾随边缘附加字母间距:
a b c
两个 排版字符单元 之间的字母间距实际上“属于”最内层包含它们的元素: 两个相邻的 排版字符单元 之间的总字母间距 (在双向重排后) 是由包含它们的最内层元素指定并渲染的。 然而,用户代理可以选择将字母间距附加到元素边界的某个 排版字符单元 上, 使用与其包含元素相关的字母间距值。
注意: 由于 Web 兼容性问题,该级别允许这种次要行为。
p{ letter-spacing : 1 em ; }
< p > a< span > bb</ span > c</ p >
a b b c
a b b c
因此,指定给某个元素的 letter-spacing 仅影响 完全包含在指定元素内的字符之间的间距:
p{ letter-spacing : 1 em ; } span{ letter-spacing : 2 em ; }
< p > a< span > bb</ span > c</ p >
a b b c
这进一步意味着, 应用 letter-spacing 到 仅包含一个字符的元素 对渲染结果没有任何影响:
p{ letter-spacing : 1 em ; } span{ letter-spacing : 2 em ; }
< p > a< span > b</ span > c</ p >
a b c
由于字母间距是在 RTL 重排之后插入的, 因此字母间距应用于下方内部的 span 也没有影响, 因为在重排之后,“c”并没有紧挨着“א”:
p{ letter-spacing : 1 em ; } span{ letter-spacing : 2 em ; }
<!-- abc 后跟希伯来字母 alef (א), bet (ב) 和 gimel (ג) --> <!-- 重排后将按相反顺序显示。 --> < p > ab< span > cא</ span > בג</ p >
a b c א ב ג
字母间距忽略不可见的零宽格式字符 (例如那些来自 Unicode Cf 类别的字符)。 必须添加间距,就像文档中没有这些字符一样。
当两个字符之间的有效间距不为零时 (由于 对齐 或 letter-spacing 的非零值), 用户代理不应应用可选的连字, 即那些未定义为所需的 用于正确呈现字体的连字。 然而, 通过低级别 font-feature-settings 属性 指定的连字和其他字体功能 优先于此规则。 请参阅 CSS Fonts Module Level 3 § feature-precedence。
注意: 在 OpenType 中,
所需连字预计与 rlig
特性关联。
因此,所有其他连字都被认为是可选的。
然而,在某些情况下,
用户代理或平台的启发式算法
会应用额外的连字以处理损坏的字体;
本规范不定义或覆盖此类特殊处理。
8.2.1. 书写体脚本
如果可能, 用户代理 可以 通过将分配到一组此类字母的总额外空间 转换为某种形式的书写体拉伸 (或压缩,针对负跟踪值) 来应用字母间距到 书写体脚本, 该拉伸会导致组的总扩展(或压缩)。 否则, 如果用户代理无法扩展 书写体脚本 的文本而不中断其书写连接, 则 不得 在该脚本的任何两个 排版字母单元 之间应用间距 (实际上将每个词视为单个 排版字母单元 以便于字母间距的应用)。 两种情况下都会导致这些字母之间的有效间距为零; 但前者会保持拉伸文本的感觉。
![]() | — | 原始文本 |
![]() | 错误 | 均匀分配每个字母之间的空间。请注意,这会破坏书写连接! |
---|---|---|
![]() | 正确 | 通过排版适当的书写体拉伸分配 ∑letter-spacing。 生成的文本与之前均匀间距的示例一样长。 |
![]() | 正确 | 在阿拉伯字母之间抑制 字母间距。 请注意,字母间距 仍然适用于非阿拉伯字符(如 空格)。 |
![]() | 错误 | 仅在未连接的字母之间应用 字母间距。这会扭曲排版颜色并模糊单词边界。 |
注意: 文本的正确书写体拉伸或压缩 可能因脚本、字体、语言、单词中的位置、行中的位置、实现复杂性、字体功能和书法偏好而异, 在某些情况下可能根本无法实现。 它可能涉及使用缩短连字、装饰变体、上下文形式、 诸如 U+0640 ـ ARABIC TATWEEL 的延长字形或其他微排版。 CSS 的范围外不定义这些效果的规则。 除非作者准备接受非互操作的结果, 否则不应将 字母间距 应用于书写体脚本。
8.3. 行首/行尾填充: line-padding 属性
名称: | line-padding |
---|---|
值: | <length> |
初始值: | 0 |
应用于: | 内联框 |
是否继承: | 是 |
百分比: | 不可用 |
计算值: | 绝对长度 |
规范顺序: | 根据语法 |
动画类型: | 按计算值类型 |
与 letter-spacing 调整 排版字符单元 之间的间距不同,它不会应用于行首或行尾, 本属性仅调整行首/行尾的间距。 额外的间距仅由行框首/尾的最内层 内联框应用, 并插入在该 内联框 的内容边缘与相邻的 内联级内容 (文本 或 原子内联)之间。 此额外空间不是 对齐机会。
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>
行填充将被插入,使每行的两侧各有 0.5em 的内联背景可见。 如果呈现时“some”和“text”之间有换行, 则额外的填充将会是: 在第一行,左侧为黑色,右侧为绿色, 在第二行,两侧均为绿色。
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
),则自动插入指定的间距。 - 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-spacing 和 letter-spacing 属性叠加。 即,letter-spacing 设置(如果有)所贡献的间距 将与 text-autospace 创建的间距相加。 word-spacing 也是如此。
在元素边界处,字符之间引入的额外间距的量由包含该边界的最内层元素确定并呈现。
8.4.1. 脚本间距
当某些字符类别在一行中直接相邻时,ideograph-alpha 和 ideograph-numeric 值会在这些字符边界处引入间距, 即在没有任何非零的 边距、边框 或 内边距,以及没有插入任何字符(如引号或空格)的情况下。 这些关键字引入的间距量为 CJK 进度度量的 1/8,即 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那样。
特别地, 由于各用户代理缺乏可靠的悬挂标点符号支持, 现有内容(特别是 ePub 内容) 使用了 U+3000 表意文字空格代替了 文本缩进, 但当段落以悬挂缩进标点符号开头时, 为了创建悬挂标点符号效果省略了空格。 因此,在这样的内容中使用 trim-both 将会去掉有效缩进, 并因此模糊了该行作为新段落第一行的区别。
请注意,这种使用表意文字空格进行段落缩进(有时如此有时不如此)的排版实践 与 HTML 和 CSS 提供的内容与样式分离原则相悖。 使用 悬挂标点符号 和 文本缩进来控制段落格式, 而不是调整文档文本内容, 可以在文档源代码中保留文本的真实语义, 并允许样式表设计者自由切换不同的间距/缩进样式, 而无需更改内容。 有关示例,请参见§ 8.5.3 CSS 中的日文段落开头惯例。
此外,行末的行为与normal和 trim-start 值保持一致, 只有在对齐之前无法适应时才修剪字符。 虽然在较少的情况下改善了排版, 但它比 space-all 更接近传统行为, 因此减少了兼容性问题。
- trim-start
- 在每行开头设置 全宽开头标点符号 为半宽字符(无空格)。 其他部分与 normal相同。
- trim-all
- 无论在行内位置如何,设置 全宽开头标点符号、全宽结尾标点符号 以及 全宽中点标点符号 为半宽字符, 而不考虑行内位置和相邻字符。
- auto
-
用户代理选择一组高质量的排版间距值。
不同平台上的用户代理可能选择不同的值。
注意: 这些间距值可能与操作系统平台的排版惯例匹配,也可能不匹配。
值 | 行首修剪 | 行尾修剪 | 修剪相邻字符 | 全局修剪 |
---|---|---|---|---|
space-all | 否 | |||
normal | 否 | 仅当无法适应时 | 是 | 否 |
space-first | 是,除第一行外 | |||
trim-start | 是 | |||
trim-both | 是 | |||
trim-all | 是 | |||
auto | 用户代理特定 / 平台相关 |
8.5.1. 全角标点折叠
通常,全角字符的字形宽度与标准汉字(例如 水 U+6C34)的进程宽度相同。 然而,许多全角标点符号的字形仅占据全角设计空间的一部分。 因此,这类标点符号并不总是设置为全角。 text-spacing-trim 的多个值允许作者控制 何时将这些字符设置为半角(通常是一个汉字宽度的一半), 何时将它们设置为全角。
为了按照指定的方式设置文本,UA 需要执行以下操作:
- 修剪(字距调整)字形的空白部分, 如果它们被设置为全角并且必须设置为半角,或
- 向字形添加空格, 如果它们被设置为半角并且必须设置为全角。
UA 可以 使用 OpenType 的 halt
和 vhal
功能
如果字体中实现了这些功能
以执行特定字形的修剪。
UA 不得 使用 hwid
功能
或以其他方式替换半角形式,
因为切换到半角字形会改变字形形状,
这是不可接受的。
一些字体为全角标点符号使用比例字形。 如果字体不支持区分 全角与半角字形 (例如通过字体功能), 那么对于这种比例字形, 给定的进程宽度同时被视为 全角和半角: UA 不得为这些字形添加或删除空格。
注意:标准汉字的进程宽度
可以通过字体度量来确定,
例如 OpenType 的 ideo
和 idtp
基线用于相反的书写模式,
或通过测量汉字的进程宽度如 水 U+6C34。
(必须使用相反的书写模式,因为某些字体经过压缩
使得字符不是正方形。)
有关 OpenType 度量的更多信息可以在 OpenType
规范 中找到。
请注意,如果 水 U+6C34、卜 U+535C 和 一 U+4E00 的进程宽度不同,
则该字体具有比例汉字,
无法通过测量字形可靠地确定全角进程宽度。
某些字体的全角标点符号 其空白太小而无法修剪(字距调整)。 UA 可以选择不修剪(字距调整) 当 UA 确定修剪(字距调整)可能会导致 字形切割、碰撞或通过字形边界框、字形度量或字体功能过度字距调整时。
如果 text-spacing-trim 被设置为 trim-all, UA 必须折叠通常与此类全角字形相关的空格 无论它们出现在哪个上下文中。 否则,除非 text-spacing-trim 被设置为 space-all(或字体具有比例全角 标点符号), UA 必须在行上相邻时折叠通常与此类全角字形相关的空格, 如下所示:
组合 | 示例对 | 效果类似 |
---|---|---|
开头—开头 | 〔+( | 〔( |
中点—开头 | ・+( | ・( |
结尾—开头 | 〕+( | 〕( |
汉字空格—开头 | +( | ( |
结尾—结尾 | )+〕 | )〕 |
结尾—中点 | )+・ | )・ |
结尾—汉字空格 | )+ | ) |
8.5.2. 文本间距字符类
在此属性的上下文中,以下定义适用:
类别和 Unicode 代码点正在审核中, 需要做出一些更改以适应 Unicode 的最近更新。[Issue #9503]
- 表意文字
- 包含所有排版字符单元 [CSS-TEXT-3],其基本字符列在下方:
- 非表意文字字母
-
包含所有排版字符单元,这些字符
属于 Unicode 字母 [L*] 和标记 [M*] 通用类别,
除非满足以下任一条件:
- 被定义为表意文字。
- 被[UAX11] 分类为东亚全角(F)。
- 在使用 text-orientation 属性 或 text-combine-upright 属性时 是竖直文本流中的竖直显示字母。
- 非表意数字
-
包含所有排版字符单元,这些字符
属于 Unicode 十进制数字 [Nd] 通用类别,
除非满足以下任一条件:
- 被[UAX11] 分类为东亚全角(F)。
- 在使用 text-orientation 属性 或 text-combine-upright 属性时 是竖直文本流中的竖直显示字母。
- 全角开头标点
- 包含任何开头标点字符(Unicode 类别
Ps
), 属于 CJK 符号和标点块(U+3000–U+303F), 或被[UAX11] 分类为东亚全角(F)。 还包括左单引号(U+2018)和左双引号(U+201C)。 修剪时,左侧(水平文本)或顶部(垂直文本)的一半会被字距调整。 - 全角结尾标点
- 包含任何结尾标点字符(Unicode 类别
Pe
), 属于 CJK 符号和标点块(U+3000–U+303F), 或被[UAX11] 分类为东亚全角(F)。 还包括右单引号(U+2019)和右双引号(U+201D)。 可能还包括全角冒号标点和/或全角点标点(见下文)。 修剪时,右侧(水平文本)或底部(垂直文本)的一半会被字距调整。 - 全角中点标点
- 包括中点(U+00B7)、断字点(U+2027)和片假名中点(U+30FB)。 可能还包括全角冒号标点和/或全角点标点(见下文)。
- 全角冒号标点
- 包括全角冒号(U+FF1A)和全角分号(U+FF1B)。
- 全角点标点
- 包括 书名号(U+3001), 顿号(U+3002), 全角逗号(U+FF0C), 全角句号(U+FF0E)。
关于 全角冒号标点 和 全角点标点 是否应被视为全角结尾标点或全角中点标点, 取决于标点符号在字形框中的绘制位置。 如果标点符号位于居中位置, 则应视为中点标点。 如果标点符号绘制在一侧(水平文本为左侧,垂直文本为顶部), 因此另一半为空白, 则该标点符号应视为结尾标点,并进行相应修剪。
UA 必须将 全角冒号标点 和 全角点标点 归类到 全角结尾标点 类别或 全角中点标点 类别, 视情况而定。 UA 可以根据语言习惯和书写模式(水平 vs. 垂直), 和/或字体信息来确定这一分类。 UA 还可以根据需要向任意类别添加其他字符。
冒号标点 | 点标点 | |
---|---|---|
简体中文(水平) | 结尾 | 结尾 |
简体中文(垂直) | 结尾 | 结尾 |
繁体中文 | 中点 | 中点 |
韩语 | 中点 | 结尾 |
日语 | 中点 | 结尾 |
请注意,至少对于中文字体, 作者观察到,标准惯例往往没有得到遵循。
8.5.3. CSS中的日语段落起始规范

开括号在行首的定位 [JLREQ]
假设用户代理样式表为p { margin: 1em 0; }
,
CSS 可以通过以下规则实现这些日语排版样式:
-
括号与缩进对齐,与其他行对齐(第一种方案):
p { /* 对齐缩进 */ margin: 0; text-indent: 1em; text-spacing-trim: trim-both; }
-
括号在所有行上保持全角间距(第二种方案):
p { /* 全角对齐 */ margin: 0; text-indent: 1em; text-spacing-trim: space-all; }
-
括号悬挂在缩进内,与其他行对齐(第三种方案):
p { /* 悬挂对齐 */ margin: 0; text-indent: 1em; text-spacing-trim: trim-both; hanging-punctuation: first; }
8.6. 字符类间距简写:text-spacing属性
名称: | text-spacing |
---|---|
值: | none | auto | <spacing-trim> || <autospace> |
初始值: | 见单独属性 |
适用范围: | 文本 |
是否继承: | 是 |
百分比: | N/A |
计算值: | 指定的关键字 |
动画类型: | 离散 |
规范顺序: | 根据语法 |
此属性是用于在一个声明中同时设置text-spacing-trim和text-autospace的简写。 值定义如下:
- none
- 关闭所有text-spacing功能: 将text-spacing-trim设置为space-all,并将text-autospace设置为no-autospace。
- auto
- 同时将text-spacing-trim和text-autospace设置为auto。
- <spacing-trim>
- 将text-spacing-trim设置为指定值。 如果未指定<autospace>值,则text-autospace将被设置为其初始值。
- <autospace>
- 将text-autospace设置为指定值。 如果未指定<spacing-trim>值,则text-spacing-trim将被设置为其初始值。
注意: 由于normal是 text-spacing-trim和text-autospace的初始值,text-spacing: normal会将它们都重置为初始值。
8.7. 跨元素边界的字符形状调整
当下列任何条件适用于分隔两个 印刷字符单元 的任何盒子的边界时,文本形状必须在内联盒子的边界被打断:
当格式没有发生有效变化时,或者只有不影响字形的格式更改时(如应用 文本装饰),文本形状不得在内联盒子边界处被打断。
如果在特定情况下合理且可能,文本形状不应在内联盒子边界处被打断,前提是字体技术的限制允许这样做。
一个可能但不合理的跨边界字符形状调整示例是处理一个对前后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 关键字另有指定,否则只有元素的 第一格式化行 受到影响。 例如,匿名块框的第一行只有在它是其父元素的第一个子元素时才会受到影响。
值具有以下含义:
- <length>
- 以绝对长度给出缩进量。
- <percentage>
-
缩进量以块容器自身
逻辑宽度
的百分比表示。
在计算 内在尺寸贡献 时,百分比必须被视为 0,但在进行布局时始终按常规解析。
注意: 这可能导致元素溢出。不建议同时使用百分比缩进和内在尺寸。
- each-line
- 缩进影响每个块容器的第一行以及 强制换行 后的每一行(但不包括 软换行后的行)。
- hanging
- 反转受影响的行。
如果 text-align 是 start, 并且 text-indent 在从左到右的文本中设置为 5em,且没有浮动元素存在,那么第一行文本将从块的 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'.
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 属性是可继承的,当在块元素上指定时,它将影响其后代的内联块元素。因此,通常建议在指定为 display: inline-block 的元素上指定 text-indent: 0。
9.2. 悬挂字形
当行的起始或结束边缘的字形悬挂时, 在测量该行内容的适合性、对齐或对齐时,它不会被考虑。 根据该行的对齐/对齐方式,这可能导致标记被放置在线框之外。 悬挂字形在计算 固有尺寸 (最小内容尺寸 和 最大内容尺寸)时也不会被考虑, 以及由此推导出的任何尺寸。 (这种测量与字距调整的交互目前由 UA 定义; CSSWG 欢迎对此提供建议。)
悬挂字形 仍然包含在其父内联框中,并且仍然参与文本对齐: 它的字符推进在确定行上可以容纳多少内容、该行的内容需要扩展或压缩多少以进行对齐,或者如何在行框内定位内容以进行文本对齐时不会被测量。 实际上,悬挂字形的字符推进被重新解释为其父 内联框 受影响边缘的额外负边距;否则,行将按照通常的方式布局。 溢出的悬挂字形通常应被视为 墨水溢出, 以避免产生不必要的滚动条,但 UA 可能在内容可编辑时或其他情况下将其视为 可滚动溢出, 这种处理方式对用户有帮助。 [CSS-OVERFLOW-3]
在某些情况下,行尾的字形可能会条件性悬挂: 它仅在对齐之前无法适应行时才会悬挂。 在测量行的内容适合性时,它不会被考虑; 但是,它的任何不适合部分将被视为悬挂。 条件性悬挂的字形在计算 最小内容尺寸时不会被考虑, 但在计算最大内容尺寸时会被考虑。
在悬挂字形与行边缘之间存在非零内联轴边框或内边距时,字形无法悬挂。 例如,带有结束内边距的内联框末尾的句点不会在行的结束边缘悬挂。
多个相邻的字形可以一起悬挂,但可以指定允许悬挂的数量限制 (例如,每行的每个边缘最多允许一个标点字符悬挂)。
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 以及表意空格 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 | ، | 阿拉伯逗号 |
U+06D4 | ۔ | 阿拉伯句号 |
U+3001 | 、 | 表意逗号 |
U+3002 | 。 | 表意句号 |
U+FF0C | , | 全角逗号 |
U+FF0E | . | 全角句号 |
U+FE50 | ﹐ | 小逗号 |
U+FE51 | ﹑ | 小表意逗号 |
U+FE52 | ﹒ | 小句号 |
U+FF61 | 。 | 半角表意句号 |
U+FF64 | 、 | 半角表意逗号 |
UA 可以根据需要包括其他字符。
注意: CSS 工作组将非常感谢 UA 包括其他字符时告知工作组此类添加。
allow-end 和 force-end 是东亚中使用的两种悬挂标点符号变体。

p { text-align: justify; hanging-punctuation: allow-end; }

p { text-align: justify; hanging-punctuation: force-end; }
第一行末尾的标点符号在 allow-end 中未悬挂,因为它适合不需要悬挂。 但是,如果使用 force-end,则强制悬挂。 对齐时将忽略悬挂的标点符号,因此当行展开时,标点符号被推到行框之外。
9.3. 双向性与行框
行框的 起始 和 结束 边由行框的 内联基准方向 决定。 虽然它们通常是匹配的,但 内联基准方向 与 包含块 或 双向段落 的 内联基准方向 是不同的。 行框的 内联基准方向 会影响 text-align-all、 text-align-last、 text-indent 和 hanging-punctuation, 即其内容相对于其边缘的位置和对齐方式。 它不会影响内联内容的格式或顺序(这些由 Unicode 双向算法 以及 CSS Writing Modes 中的规则控制)。[UAX9] [CSS-WRITING-MODES-4]。
在大多数情况下,行框的 内联基准方向 由其 包含块 的计算 方向 给定。 然而,如果其 包含块 设置了 unicode-bidi: plaintext:
- 如果该行框所属的 双向段落 (即行框承载内容的 双向段落)具有强方向性,则行框的 内联基准方向 为该方向。
- 如果行框是空的(即不包含任何 原子内联元素 或字符,除了换行符,如有), 或者没有强方向性(仅包含弱或中性字符),则其 内联基准方向 来自前一个行框(如有),否则,如果这是包含块中的第一个行框,则来自包含块的 方向 属性。 (这可能导致 RTL 行框的内容具有 LTR 基准方向。)
<block>
是一个起始对齐的预格式化块(display:
block; white-space: pre; text-align: start),
每隔一行是右对齐的:
< block style = "unicode-bidi: plaintext" > français فارسی français فارسی français فارسی</ block >
< 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 方向。 这使得后续的空行也为 LTR,意味着该行的光标应显示在左边缘。然而,由于没有前面的行,空的第一行假定其包含块的 RTL 方向。
附录 A: 文本处理操作顺序
本附录具有规范性。
以下列表定义了文本操作的顺序。 (实现不必遵守此顺序,只要结果布局相同即可。)
- § 4.2 空白修剪:white-space-trim 属性
- 空白处理 第一部分(预换行)
- § 2.2 单词之间的扩展:word-space-transform 属性 和 文本转换
- 文本组合 [CSS-WRITING-MODES-4]
- 文本方向 [CSS-WRITING-MODES-4]
-
文本换行,同时应用每行操作:
-
空白处理 第二部分
- 对齐 (可能影响字形选择和/或文本换行,回到该步骤)
- 文本对齐
- 文本组对齐
附录 B: 转换为纯文本
此附录为纯文本复制粘贴操作的规范部分。
当 CSS 渲染的文档转换为纯文本格式时,预期如下:
- text-transform 属性无效。
- white-space-trim 和 § 4.3.1 阶段 I:折叠和转换 被应用, 并且任何位于块开头或紧跟在 强制换行符 之后的 可折叠 空白字符 序列将被移除。
附录 C: 默认 UA 样式表
此附录是参考性的,旨在帮助 UA 开发者实现 HTML 的默认样式表,但 UA 开发者可以根据需要忽略或修改。
/* 使 option 元素对齐 */ option{ text-align : match-parent; } /* 禁止 textarea 中的空白折叠 */ textarea{ white-space-collapse : preserve !important; } /* 在预格式化文本中保留字符网格 */ pre, code, kbd, samp, tt{ text-spacing : none; } /* 避免悬挂标点符号继承到预格式化块中 */ pre{ hanging-punctuation : none; }
附录 D: 脚本与间距
此附录具有规范性。
排版行为在语言之间略有不同,但在书写系统之间差异巨大。 本附录根据其对齐和间距行为对 Unicode 6.0 中的一些常见 脚本 进行分类。 类别描述是描述性的而非规定性的;决定性因素是 对齐机会 的优先级。
- 块状脚本
-
CJK 及所有宽字符(参见 东亚宽度
[UAX11])。
包含以下 Unicode 脚本:
Bopomofo、汉字、Hangul、Hiragana、Katakana 和 Yi。
具有 东亚宽度属性
的
Wide
和Fullwidth
字符也包括在内,但仅当 书写系统 是 中文、韩文 或 日文 时,Ambiguous
字符才会包括在内。 - 簇状脚本
- 簇状脚本有离散的单位,且只在单词边界处断行,但不使用可见的单词分隔符。 它们优先拉伸空格,但在对齐时也能舒适地接受字符间距。 簇状脚本包括但不限于以下 Unicode 脚本: Khmer、Lao、Myanmar、新傣仂文、Tai Le、Tai Tham、Tai Viet、泰文。
- 草书脚本
-
草书脚本不允许在其字母之间出现空隙,无论是对齐还是 字母间距。
包含以下 Unicode 脚本:
阿拉伯文、Hanifi Rohingya、Mandaic、蒙古文、N’Ko、Phags Pa、叙利亚文。
注意: 带有基线连接符的印度脚本(如梵文和古吉拉特文)不被视为 草书脚本,并且确实允许在 排版字符单位 之间存在空隙。 参见 印度排版要求 [ILREQ]。
用户代理应随着 Unicode 支持的更新更新此列表,以处理未来版本的 Unicode 中尚未编码的草书脚本,并鼓励用户请求 CSSWG 相应更新此规范。
附录 E: 字符与属性
此附录具有规范性。
Unicode 定义了四个与 CSS 排版相关的代码点级别属性:
- 东亚宽度属性
-
定义于 Unicode Standard Annex #11,作为
East_Asian_Width
属性在 Unicode Character Database 中给出。 [UAX11] [UAX44] - 通用类别
-
定义于 Unicode Standard Annex #44,作为
General_Category
属性在 Unicode Character Database 中给出。 [UAX44] - 脚本属性
-
定义于 Unicode Standard Annex #24,作为
Script
属性在 Unicode Character Database 中给出。 [UAX24] [UAX44] - 垂直方向属性
-
定义于 Unicode Standard Annex #50,作为
Vertical_Orientation
属性在 Unicode Character Database 中给出。 [UAX50] [UAX44]
Unicode 为单个代码点定义了属性,但有时需要确定 排版字符单元 的属性。 对于 CSS 文本来说,排版字符单元 的属性由其第一个 字素簇 的基础字符决定,除非有以下两种情况:
-
由 Enclosing Mark (
Me
) 组成的字素簇,若其脚本为 Common,则视为通用符号 (So
), 并假设它们具有与替代字符 (U+FFFD) 相同的 Unicode 属性。 -
以 Space Separator (
Zs
) 作为基础的字素簇被视为修饰符号 (Sk
)。 它们假设具有与基础字符相同的东亚宽度属性,但其他属性则取决于序列中的第一个组合字符。
附录 F: 标识内容书写系统
此附录具有规范性。
虽然大多数语言有一个首选的书写系统,但有些语言有多个书写系统,
并且大多数语言还可以被转录为一个或多个外来书写系统。
常见的例子是大多数语言至少有一个拉丁转录系统,因此可以用拉丁书写系统来书写。
转录文本通常采用书写系统的排版约定:例如,日文的罗马字和中文拼音使用拉丁字母和单词空格,
并相应地遵循拉丁文的断行和对齐方式。
另一个例子是历史上的表意韩文(ko-Hani
)不使用单词空格,因此应类似于中文排版,而非现代韩文。
在 HTML 或任何使用 BCP47 标签来标识语言的 文档语言 中,
作者可以通过使用脚本子标签来消除歧义或指明非典型书写系统的使用。[BCP47]
例如,表示使用拉丁书写系统的非本土语言时,可以添加 -Latn
脚本子标签,如 ja-Latn
表示日文罗马字。
其他书写系统有其他子标签,参见 ISO 的 Code for the Representation of Names of Scripts 和
ISO15924 脚本标签注册表。[ISO15924]
zh-Latn
- 中文,使用拉丁转录书写。
ko-Hani
- 韩文,使用汉字(中文表意字符)书写。
tr-Arab
- 土耳其文,使用阿拉伯文书写。
mn-Cyrl
- 蒙古文,使用西里尔字母书写。
mn-Mong
- 蒙古文,使用传统蒙古文书写。
然而,BCP47 脚本子标签通常不会被使用(事实上不推荐),对于与单一书写系统强关联的语言,这些书写系统被假定为默认书写系统。
当未指定其他书写系统时,默认书写系统应被假设。[BCP47]
IANA 通过 Suppress-Script
字段维护各种语言的最常用书写系统数据库,可在
语言子标签注册表
中查阅。
注意: 关于语言标签的更多建议,可以参考 国际化工作组 的 “HTML 和 XML 中的语言标签” 和 “选择语言标签”。
当未明确指明书写系统时,UA 应假设声明的 内容语言 的最常用书写系统, 用于与语言相关的排版行为,如断行或对齐。 然而,若作者已明确声明了其他书写系统,UA 不应假设最常用书写系统。 若 UA 对特定语言和书写系统组合没有语言特定的知识,则必须使用声明的书写系统的排版约定, 而不是假定的书写系统,这对于声明的书写系统是不合适的。
语言与其最常用书写系统的完整对应关系不在本文档的范围内。 然而,用户代理至少必须假设以下内容:
- 若 内容语言 是中文,且 书写系统 未指定, 或对于任何 内容语言,若 书写系统 被指定为 Hant、Hans、Hani、Hanb 或 Bopo ISO 脚本代码之一,则 书写系统 为 中文。
- 若 内容语言 是日文,且 书写系统 未指定, 或对于任何 内容语言,若 书写系统 被指定为 Jpan、Hrkt、Hira 或 Kana ISO 脚本代码之一, 则 书写系统 为 日文。
- 若 内容语言 是韩文,且 书写系统 未指定, 或对于任何 内容语言,若 书写系统 被指定为 Kore、Hang 或 Jamo ISO 脚本代码之一, 则 书写系统 为 韩文。
- 仅当 内容语言 本身未知时, 或明确指明了未知的书写系统时,书写系统 才被视为 未知。
附录 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: 单词和短语检测
此附录具有规范性。
本规范中的某些操作依赖于自动的单词边界检测或短语边界检测。
这两种操作类似:用户代理对文本进行语言分析,以识别语言特定的有意义字符序列。它们的区别仅在于针对不同的文本单元:单词或短语。
虽然在广义上易于理解,但单词和短语的概念都难以精确定义,特别是在跨多种语言的情况下。尽管如此,在本上下文中:
-
单词是一个可识别的语义单元,可能由一个或多个字符或音节组成。
注意:关于该概念的一些讨论,请参阅什么是单词?
-
短语是由一个或多个单词组成的短语组合,作为概念或语法单元,构成句子或从句的组成部分。
注意:这不要与法语单词phrase相混淆,在法语中它的意思是句子,而不是这里使用的英语意义上的短语。在日语中,这对应于“文节”的概念。
每个检测到的单词或短语的起始和结束位置称为单词边界或短语边界。单词和短语边界本身是不可见的,但诸如word-space-transform或word-break之类的属性可能会在这些位置产生可见的效果。
用于检测单词或短语并确定其边界的具体算法取决于用户代理,可能会考虑多种因素或方法,例如基于词典的词法分析、标点符号或其他分隔字符的识别、形态分析、机器学习方法等……
然而,必须遵守以下约束:
- 用户代理不得在组成单个排版字符单元的字符之间放置单词或短语边界。
- 用户代理不得在具有换行类 GL、WJ 或 ZWJ 的字符旁边放置单词或短语边界;当两个可能的单词或短语被这些字符分隔时,它们必须被视为一个单词或短语。[UAX14]
- 如果一个单词或短语后面紧跟以下一个或多个字符,用户代理必须将它们视为前一个单词或短语的一部分:
-
标点符号本身不是一个短语:它应附加到相邻的语言单词或短语的相关一侧。例如,括号和引号等包围性标点符号是它们所包围短语的一部分;逗号和分号附加在前一个短语后面;U+00BF 倒置问号附加在后一个单词上;等等。
然而,非传统的标点符号使用,如表情符号、颜文字或 Perl 代码片段,可能导致用户代理需要偏离这一原则。
-
在确定单词或短语边界时,必须忽略内联框边界和脱离流的元素。然而,如果在与一个或多个内联框边界相同的位置发现了一个单词或短语边界,则必须将该单词或短语边界插入参与该内联框边界的最外层元素中。
在以下示例中,红色“
|
”表示用户代理检测单词边界时合理的位置:กรุงเทพ|คือ|สวยงาม
如果该句子包含一些内联标记,以下示例显示了放置单词边界的正确位置:
กรุงเทพ|คือ|
< em > สวยงาม</ em > 以下示例显示了错误的位置:
กรุงเทพ|คือ
< em > |สวยงาม</ em > 以下示例显示了在更复杂情况下的正确位置:
กรุงเทพ|
< b >< u > คือ</ u > |< em > สวยงาม</ em ></ b >
安全性考虑
本规范没有引入新的安全性考虑。
隐私考虑
本规范会泄露用户安装的断字和断行词典。
致谢
本规范的完成离不开以下人员的帮助: 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第“变更”章节。
以下列出了特定于第 4 级的变更。
自2024 年 2 月 19 日工作草案以来的重要变更包括:
-
将text-spacing-trim的值trim-auto重命名为trim-both。(问题 10161)
-
在大量行的情况下,放宽了对text-wrap-style: balance不改变行的要求。(问题 10186)
-
定义了text-wrap-style: balance和line-clamp之间的交互。(问题 9310)
-
为text-transform添加了值math-auto。(问题 5386)
自2023 年 10 月 20 日工作草案以来的重要变更包括:
-
从定义中恢复了意外删除的“以及每个在强制换行之后的行”text-spacing-trim: space-first。(问题 9532)
-
将normal设为text-spacing-trim的初始值。(问题 9511)
-
改变space-first的行末行为。(问题 9736)
-
space-first 在换行后适用。(问题 9532)
-
澄清全角标点符号折叠的细节。(问题 9225)
-
通过用户代理样式规则,防止 pre 元素默认继承悬挂标点。(问题 9689)
自2023 年 3 月 29 日工作草案以来的重要变更包括:
-
将text-wrap属性重新定义为两个新属性的简写,text-wrap-mode和text-wrap-style, 并使text-wrap-mode而不是text-wrap成为white-space属性的扩展。
-
更新附录 G: 小假名映射到 Unicode 15.0。 (问题 8442)
-
重新设计了word-break: auto-phrase word-break: manual特性 (从之前作为独立的
word-boundary-detection
属性的尝试),并向word-space-transform添加了一个auto-phrase值(因为它不能再依赖于word-boundary-detection
)。 并更新相关机制。 -
将
word-boundary-expansion
重命名为word-space-transform -
向text-spacing-trim添加了trim-all值。(问题 8482)
-
非可调整的 Unicode 换行控制(除了 NBSP)优先于我们关于原子内联的规则。(问题 8972)
自2023 年 3 月 1 日工作草案以来的重要变更包括:
-
完成了white-space的多个扩展长写属性的翻译:
-
向break-spaces添加到white-space-collapse,以便所有简写值都可以在长写属性中表示(问题 8256)
-
将所有长写关键字集成到white-space简写属性中
-
相应地更新文本
-
-
将text-space-collapse和text-space-trim重命名为 white-space-collapse和white-space-trim。 (问题 8273)
自2022 年 12 月 31 日工作草案以来的重要变更包括:
-
重新设计了text-spacing通过:
-
扩展了在text-spacing中评估的上下文化字符,包括
Pe
和Ps
类别的字符。(问题 6091) -
将text-space-collapse重命名回white-space-collapse。(问题 8273)
自2022 年 5 月 5 日工作草案以来的重要变更包括:
- 向ruby值添加到text-justify。 (问题 771 问题 779)
- 将text-spacing: normal切换为使用trim-end而不是allow-end。 (问题 7055)
- 将text-spacing: normal切换为也应用ideograph-alpha和ideograph-numeric, 更新了用户代理默认样式表以排除这些在等宽字体上下文中使用,指定了非零的 margin/border/padding 会抑制空间插入,并将插入空间的量定义为0.125ic。 (问题 6950)
- 定义text-align: match-parent在start上计算到根元素,以简化实现。 (问题 6542)
- 允许distribute关键字作为遗留值别名,或简单地计算为inter-character; 这允许用户代理选择更简单的方式,因为两者在向后兼容性方面没有区别。 (问题 7322)
- 将white-space-trim的trim-inner值重命名为discard-inner,以保持与其他值的一致性。 (问题 448)
自2019年工作草案以来的显著变化包括:
- 整合了[CSS-TEXT-3]的全部内容。
- 为word-spacing和letter-spacing添加百分比,以表示相对于当前font-size的尺寸。 (Issue 2165)
- 建议使用用户代理规则防止
textarea
中的空格折叠。 (Issue 6309)
第3级以来的新增内容
第4级中的新功能:
-
word-break: auto-phrase,用于在断行时自动确定短语保持在一起
-
word-space-transform,用于转换词分隔符
-
将white-space属性分解为多个长手形式:
-
white-space-trim,用于修剪元素边界的多余空白
-
text-wrap-mode,用于控制是否发生换行
-
wrap-before、wrap-after和wrap-inside,用于避免或强制换行(类似于分页的break-*属性)
-
hyphenate-character,用于明确控制连字符
-
hyphenate-limit-zone、hyphenate-limit-chars、hyphenate-limit-lines、hyphenate-limit-last,用于更好地控制自动连字符
-
<string>值用于text-align对齐,例如对齐小数点
-
text-group-align用于组对齐一组通过text-align对齐的行框
-
line-padding用于在行的起始/结束处插入空格
-
text-spacing用于在标点和脚本更改周围自动调整间距