16 文本

以下章节定义的属性影响字符、空格、单词和段落的视觉呈现。

16.1 缩进：'text-indent' 属性

此属性指定块容器中第一行文本的缩进。更确切地说，它指定第一个流入块的第一个行框的盒子的缩进。该盒子相对于行框的左（或右，对于从右到左的布局）边缘缩进。用户代理必须将此缩进渲染为空白空间。

'text-indent' 仅在行是元素的第一格式化行时才有效。例如，只有在匿名块盒子是其父元素的第一个子元素时，才会受到影响。

值有以下含义：

<length>

缩进为固定长度。

<percentage>

缩进为包含块宽度的百分比。

'text-indent' 的值可以为负，但可能有特定实现的限制。如果 'text-indent' 的值为负或超过块的宽度，上述的第一个盒子可能会溢出块。'overflow' 的值会影响此类溢出文本是否可见。

p { text-indent: 3em }

注意：由于 'text-indent' 属性是继承的，当在块元素上指定时，它将影响后代的内联块元素。因此，通常建议在指定 'text-indent: 0' 的元素上指定 'display:inline-block'。

16.2 对齐：'text-align' 属性

此属性描述块容器的内联级内容如何对齐。值有以下含义：

left, right, center, justify

分别将文本左对齐、右对齐、居中和两端对齐，如内联格式化部分所述。

一块文本是行框的堆叠。对于 'left'，'right' 和 'center'，此属性指定内联级盒子在每个行框内相对于行框的左侧和右侧的对齐方式；对齐与视口无关。对于 'justify'，此属性指定应通过扩展或收缩内联盒子的内容，使内联级盒子尽可能与行框的两侧齐平，否则将按初始值对齐。（另见'letter-spacing' 和 'word-spacing'。）

如果元素的 'white-space' 计算值为 'pre' 或 'pre-wrap'，则该元素的文本内容的字形或空白不得因对齐而改变。

注意：CSS 未来可能会添加一种方式来使用 'white-space: pre-wrap' 对文本进行对齐。

div.important { text-align: center }

符合规范的用户代理 可能会将 'justify' 的值解释为 'left' 或 'right'，具体取决于元素的默认书写方向是从左到右还是从右到左。

16.3 装饰

16.3.1 下划线、上划线、删除线和闪烁：'text-decoration' 属性

此属性描述了添加到元素文本的装饰，使用元素的颜色。当指定或传播到内联元素时，它影响该元素生成的所有盒子，并进一步传播到分割内联元素的任何流内块级盒子（见 第 9.2.1.1 节）。但是，在 CSS 2.2 中，装饰是否传播到块级表格是未定义的。对于建立内联格式化上下文的块容器，装饰会传播到包裹所有流内内联级子元素的匿名内联元素。对于所有其他元素，它传播到任何流内子元素。请注意，文本装饰不会传播到浮动和绝对定位的后代，也不会传播到内联块和内联表格等原子内联级后代的内容。

下划线、上划线和删除线仅应用于文本（包括空白、字母间距和单词间距）：跳过边距、边框和内边距。用户代理不得在非文本内容上渲染这些文本装饰。例如，图片和内联块不得被下划线。

<span style="visibility: hidden; text-decoration: underline">
 <span style="visibility: visible">
  下划线还是没有下划线？
 </span>
</span>

后代元素上的 'text-decoration' 属性不能对祖先的装饰产生任何影响。在确定文本装饰线的位置和厚度时，用户代理可以考虑后代的字体大小和主要基线，但必须在每一行上使用相同的基线和厚度。相对定位的后代会将所有影响它的文本装饰与后代的文本一起移动；它不会影响装饰在线上初始位置的计算。

值有以下含义：

none

不产生任何文本装饰。

underline

每行文本都有下划线。

overline

每行文本上方都有一条线。

line-through

每行文本中间都有一条线。

blink

文本闪烁（在可见和不可见之间交替）。符合规范的用户代理可以选择不让文本闪烁。请注意，不让文本闪烁是一种满足WAI-UAAG 检查点 3.3的技术。

文本装饰所需的颜色必须来自设置了 'text-decoration' 的元素的'color' 属性值。即使后代元素具有不同的'color'值，装饰的颜色也必须保持不变。

一些用户代理通过将装饰传播到后代元素来实现文本装饰，而不是保持固定的厚度和线位置，如上所述。这可以说是由 CSS2 中较宽松的措辞所允许的。仅支持 SVG1、仅支持 CSS1 和仅支持 CSS2 的用户代理可能会实现旧模型，并仍然声称符合 CSS 2.2 的这一部分。（这不适用于此规范发布后开发的用户代理。）

a:visited,a:link { text-decoration: underline }

   blockquote { text-decoration: underline; color: blue; }
   em { display: block; }
   cite { color: fuchsia; }

   <blockquote>
    <p>
     <span>
      救命，救命！
      <em> 我在帽子下！</em>
      <cite> —GwieF </cite>
     </span>
    </p>
   </blockquote>

16.4 字母和单词间距：'letter-spacing' 和 'word-spacing' 属性

此属性指定文本字符之间的间距行为。值有以下含义：

normal

间距为当前字体的正常间距。此值允许用户代理调整字符间的空间以对齐文本。

<length>

此值表示字符间的空间额外添加到默认字符间距之上。值可以为负数，但可能存在特定实现的限制。用户代理不得进一步增加或减少字符间的空间以对齐文本。

字符间距算法取决于用户代理。

blockquote { letter-spacing: 0.1em }

blockquote { letter-spacing: 0cm }   /* 等同于 '0' */

当两个字符之间的最终间距与默认间距不同时，用户代理不应使用连字。

此属性指定单词之间的间距行为。值有以下含义：

normal

正常的单词间距，由当前字体和/或用户代理（UA）定义。

<length>

此值表示单词间的空间额外添加到默认单词间距之上。值可以为负数，但可能存在特定实现的限制。

单词间距算法取决于用户代理。单词间距还会受到对齐方式的影响（参见'text-align'属性）。单词间距影响每个空格（U+0020）和在应用空白处理规则后留在文本中的不间断空格（U+00A0）。该属性对其他单词分隔符字符的影响未定义。然而，一般标点符号、宽度为零的字符（如零宽度空格 U+200B）和固定宽度空格（如 U+3000 和 U+2000 至 U+200A）不受影响。

h1 { word-spacing: 1em }

16.5 大写效果：'text-transform' 属性

此属性控制元素文本的大小写效果。值有以下含义：

capitalize

将每个单词的首字母大写；其他字符不受影响。

uppercase

将每个单词的所有字符转换为大写。

lowercase

将每个单词的所有字符转换为小写。

none

无大小写效果。

每种情况下的实际转换效果取决于书写语言。有关查找元素语言的方法，请参阅 BCP 47 ([BCP47])。

只有属于“双字母书写系统”的字符才会受到影响，参见[UNICODE]。

h1 { text-transform: uppercase }

16.6 空白处理：'white-space' 属性

此属性声明元素内的空白应如何处理。值有以下含义：

normal

此值指示用户代理折叠连续的空白，并根据需要断行以填充行框。

pre

此值阻止用户代理折叠连续的空白。行只在保留的换行符处断开。

nowrap

此值与 'normal' 类似，会折叠空白，但禁止在文本内断行。

pre-wrap

此值阻止用户代理折叠连续的空白。行在保留的换行符处断开，并根据需要断行以填充行框。

pre-line

此值指示用户代理折叠连续的空白。行在保留的换行符处断开，并根据需要断行以填充行框。

源代码中的换行符可以由回车符 (U+000D)、换行符 (U+000A) 或两者 (U+000D U+000A) 表示，或由其他机制表示段落开始和结束，例如 SGML 的 RECORD-START 和 RECORD-END 标记。CSS 的 'white-space' 处理模型假定所有换行符都已标准化为换行符。识别其他换行表示的用户代理必须按此标准化已完成的规则应用空白处理。如果文档语言未指定换行规则，文本文档中的每个回车符 (U+000D) 和 CRLF 序列 (U+000D U+000A) 都视为单个换行符。这一默认的标准化规则也适用于生成的内容。

用户代理必须识别换行符 (U+000A) 作为换行字符。用户代理还可以将其他强制换行字符视为换行字符，根据 UAX14。

pre        { white-space: pre }
p          { white-space: normal }
td[nowrap] { white-space: nowrap }

pre[wrap]  { white-space: pre-wrap }

16.6.1 'white-space' 处理模型

对于每个内联元素（包括匿名内联元素），执行以下步骤，将双向格式化字符视为不存在：

1. 如果 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line'，则删除围绕换行符（U+000A）的每个制表符（U+0009）、回车符（U+000D）或空格（U+0020）字符。
2. 如果 'white-space' 设置为 'pre' 或 'pre-wrap'，则将未被元素边界中断的空格（U+0020）序列视为一系列不间断的空格。然而，对于 'pre-wrap'，序列末尾存在换行机会。
3. 如果 'white-space' 设置为 'normal' 或 'nowrap'，则出于渲染目的，将换行符字符转换为以下字符之一：空格字符、零宽度空格字符（U+200B），或不渲染的字符（即，无字符），具体根据用户代理的算法及内容脚本而定。
4. 如果 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line'，
   1. 每个制表符（U+0009）都会转换为空格（U+0020）。
   2. 任何跟随另一个空格（U+0020）的空格（U+0020）——即使是在内联元素之前的空格，如果该空格的 'white-space' 也设置为 'normal'、'nowrap' 或 'pre-line'——都会被移除。

然后，块容器的内联元素将被布局。内联元素的布局会考虑双向重排，并根据 'white-space' 属性指定的方式进行换行。当进行换行时，换行机会基于上述空白处理步骤之前的文本来确定。

在布局每一行时，

1. 如果一行开头的空格（U+0020）的 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line'，则该空格将被移除。
2. 所有制表符（U+0009）都将被渲染为一个水平移动，使下一个字形的起始边与下一个制表位对齐。制表位位于距离块起始内容边缘的空格（U+0020）宽度的8倍的倍数处。
3. 如果一行末尾的空格（U+0020）的 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line'，则该空格也将被移除。
4. 如果一行末尾的空格（U+0020）或制表符（U+0009）的 'white-space' 设置为 'pre-wrap'，用户代理可以选择在视觉上折叠它们。

浮动和绝对定位的元素不会引入换行机会。

16.6.2 双向文本和空白折叠示例

给出以下标记片段，特别注意空格（为强调和识别，使用了不同的背景和边框）：

 
     <ltr>A <rtl> B </rtl> C</ltr>

...其中，<ltr> 元素表示从左到右的嵌入，而 <rtl> 元素表示从右到左的嵌入，并且假设 'white-space' 属性设置为 'normal'，则上述处理模型将导致以下结果：

• 在 B 之前的空格 ( ) 将与 A 之后的空格 ( ) 折叠。
• 在 C 之前的空格 ( ) 将与 B 之后的空格 ( ) 折叠。

这将留下两个空格，一个在从左到右嵌入级别的 A 之后，另一个在从右到左嵌入级别的 B 之后。然后根据 Unicode 双向算法进行渲染，最终结果为：

     A  BC

请注意，A 和 B 之间有两个空格，而 B 和 C 之间没有空格。这有时可以通过使用字符的自然双向性而不是显式嵌入级别来避免。此外，最好避免在开始和结束标签内立即使用空格，因为在处理空白折叠时，这些空格往往会产生奇怪的效果。

16.6.3 控制字符和组合字符的细节

除 U+0009（制表符）、U+000A（换行符）、U+0020（空格）和 U+202x（双向格式化字符）之外的控制字符，均视为正常字符进行渲染。

组合字符应视为与其组合的字符的一部分。例如，如果内容为 "o<span>&#x308;</span>"，则 :first-letter 将样式化整个字形，而不仅仅是匹配基本字符。