早期CSS文本功能就是设置字体、字号、颜色、样式、粗细、间距等。CSS3的文本功能不再局限于这些基本设置,它优化了已经存在的各个属性,整合了各种不兼容的私有属性,给文本添加一些高级属性,并作为一个独立的模块进行开发,以尽快完善和迭代CSS文本功能。
CSS3文本模块(Text Module)把与文本相关的属性单独进行规范。文本模块的最早版本是在2003年制定的(http://www.w3.org/TR/2003/CR-css3-text-20030514/),2005年对其进行了修订(http://www.w3.org/TR/2005/WD-css3-text-20050627/),2007年又进行了系统更新(http://www.w3.org/TR/2007/WD-css3-text-20070306/),最后形成了一个较为完善的文本模型(http://www.w3.org/TR/css3-text/)。
在最终版本的文本模块中,除了新增文本属性外,还对CSS2.1版本中已定义的属性取值进行修补,增加了更多的属性值,以适应复杂环境中文本的呈现。
与2003年版本相比,进行了较大的改动,其中主要改动说明如下。
- line-break和word-break-cjk属性被word-break属性替换。
- word-break-inside属性被hyphenate属性替换。
- wrap-option属性被text-wrap和word-break属性替换。
- linefeed-treatment、white-space-treatment和all-space-treatment属性被white-space-collapse属性替换。
- min-font-size和max-font-size属性被移至到下一个CSS3版本中字体模块内。
- 修改了text-align属性中left和right属性值在垂直文本中的行为。
- text-align-last属性取消了size属性值。
- text-justify属性取消了newspaper属性值。
- word-spacing和letter-spacing属性增加了百分比取值。
- text-wrap属性增加了suppress属性值。
- 删除linefeed-treatment属性
- text-align-last属性取消了size属性值。
- text-justify属性新增了tibetan属性值。
- punctuation-trim属性新增加了end属性值。
- kerning-mode:contextual被punctuation-trim:adjacent替换,其他控制被移至字体模块。
- text-shadow属性现在可以继承。
- 新增text-outline属性。
- 新增text-emphasis属性,替换font-emphasis属性。
- 重新定义了text-indent属性。
- 重新设计了hanging-punctuation属性。
最新版本的文本模型与2005年版本(http://www.w3.org/TR/2005/WD-css3-text-20050627/)相比,也进行了适当修订,其中增加text-emphasis和text-outline属性,移出了font-emphasis属性,其他更多改动细节请参阅工作文档
为方便读者参考和学习,下面简单描述CSS3新增的文本属性。
white-space-collapse
语法说明如下:
white-space-collapse:preserve|collapse|preserve-breaks|discard;
white-space-collapse初始值为collapse,适用于所有元素。该属性设置或检索如何处理对象内包含的空格字符,对应CSS2.1版本中的white-space属性。取值简单说明如下。
- collapse使用一个单一的字符序列呈现空白(或在某些情况下,没有字符)。
- preserve可以呈现所有空白,换行符将被保留。
- preserve-breaks抛弃呈现所有空白,但保留换行符。
- discard抛弃呈现所有空白。
white-space
语法说明如下:
white-space:normal|pre|nowrap|pre-wrap|pre-line;
white-space初始值为无,适用于所有元素。该属性设置或检索对象内空格字符的处理方式。它是white-space-collapse和textwrap属性的简便用法,但并没有包含white-space-collapse和text-wrap属性的所有功能。与CSS2.1版本相比,新增了两个属性值。取值简单说明如下。
- normal类似white-space-collapse:collapse;text-wrap:normal;。
- pre类似white-space-collapse:preserve;text-wrap:none;。
- nowrap类似white-space-collapse:collapse;text-wrap:none;。
- pre-wrap类似white-space-collapse:preserve;text-wrap:normal;。
- pre-line类似white-space-collapse:preserve-breaks;text-wrap:normal;。
word-break
语法说明如下:
word-break:normal|keep-all|loose|break-strict|break-all;
word-break属性初始值为normal,适用于所有元素。该属性设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all。取值简单说明如下。
- normal根据语言自己的规则,确定换行方式。
- keep-all同normal,对于中、日、韩字符不允许字断开。
- loose类似normal,但是允许中、日、韩字符在任意位置断开。
- break-strict类似normal,但是对于非中、日、韩字符可以允许在任意位置断开。
- break-all类似break-strict,除了中、日、韩字符应遵循loose的规则。
text-wrap
语法说明如下:
text-wrap:normal|unrestricted|none|suppress;
text-wrap属性的初始值为normal,适用于所有元素。CSS3定义文本换行通过text-wrap和word-wrap两个属性来控制。text-wrap属性设置或检索对象内文本的换行模式。取值简单说明如下。
- normal自动换行模式。
- none不换行模式。
- unrestricted无限制模式。
- suppress压制模式。
word-wrap
该属性针对字符换行问题进行处理,设置或检索当当前行超过指定容器的边界时是否断开转行。,详细说明请参阅下面讲解
text-align
语法说明如下:
text-align:start|end|left|right|center|justify|<string>;
text-align属性初始值为start,适用于所有元素。该属性设置或检索对象中文本的对齐方式。与CSS2.1版本相比,CSS3增加了start、end和<string>属性值。其中start和end属性值主要针对行内元素来说的,即在包含元素的开始位置或尾部位置显示。而<string>属性值主要应用于表格单元格中,将根据某个指定的字符进行对齐。
text-align-last
语法说明如下:
text-align-last:start|end|left|right|center|justify;
text-align-last属性初始值start,适用于所有元素。该属性设置或检索对象中最后一行文本的对齐方式。或者针对text-align设置为justify时,强制换行的文本对齐方式。
text-justify
语法说明如下:
text-justify:auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|tibetan;
text-justify初始值为auto,适用于所有元素。该属性设置或检索对象内调整文本使用的对齐方式。只有当text-align设置为justify时,设置该属性才有效。CSS3最新版本汲取了IE的私有属性text-justify,但是重新规划了取值。取值简单说明如下。
- auto允许浏览器代理用户确定使用的两端对齐方式。
- inter-word通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效。
- inter-ideograph为表意字文本提供完全两端对齐。增加或减少表意字和词间的空格。
- inter-cluster调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档。
- distribute通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端
- 对齐的最精确格式,适用于东亚文档,尤其是泰文。
- kashida通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。
- tibetan两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档。该值可能在未来修订中删除。
word-spacing
语法说明如下:
word-spacing:normal|<length>|<percentage>;
word-spacing初始值为normal,适用于所有元素。该属性检索或设置对象中的单词之间插入的空格。其中percentage表示根据空格字符(U+0020)的宽度进行计算。单词间距会受对齐调整的影响。
letter-spacing
语法说明如下:
letter-spacing:normal|<length>|<percentage>;
letter-spacing初始值为normal,适用于所有元素。该属性检索或设置对象中字符之间的间隔。该属性将指定的间隔添加到每个文字之后,但最后一个字将被排除在外,字符间距会受对齐调整的影响。
punctuation-trim
语法说明如下:
punctuation-trim:none|[start||end||adjacent];
punctuation-trim初始值为none,适用于所有元素及其内容。该属性检索或设置标点符号的修剪。取值简单说明如下。
- none不修剪。
- start根据开始位置的标点符号,修剪另一半标点符号。
- end根据结束位置的标点符号,修剪另一半标点符号。
- adjacent根据相邻位置的标点符号,修剪另一半标点符号。
text-emphasis
语法说明如下:
text-emphasis:none|[[accent|dot|circle|disc][before|after]?];
text-emphasis初始值为none,适用于所有元素及其内容。该属性检索或设置重点文本样式。取值简单说明如下。
- none没有重点标记。
- accent马克笔画标记。
- dot点标记。
- circle空心圆标记。
- disc实心圆标记。
- before在顶部标记,或者右侧标记(针对垂直书写的文本)。
- after在文本底部标记,或者左侧标记(针对垂直书写的文本)。
text-shadow
该属性检索或设置文本阴影,详细说明请参阅下面讲解。
text-outline
语法说明如下:
text-outline:none|[<color><length><length>?|<length><length>?<color>];
text-outline初始值为none,适用于所有元素及其内容。该属性检索或设置文本的外形轮廓。其中第一个长度值表示轮廓的厚度,第二个长度值是可选的,表示模糊半径。轮廓不会覆盖文本本身。
text-indent
语法说明如下:
text-indent:[<length>|<percentage>]hanging?;
text-indent初始值为0,适用于块状元素、行内块状元素或者表格单元格。该属性检索或设置对象中的文本的缩进。其中<percentage>表示根据包含元素的宽度进行计算。
hanging-punctuation
语法说明如下:
hanging-punctuation:none|[start||end||end-edge];
hanging-punctuation属性初始值为none,适用于块状元素、行内块状元素或者表格单元格。该属性检索或设置对象是否悬挂一个标点符号。取值简单说明如下。
- start标点符号可以挂在第一行开始边缘。
- end标点符号可以挂在了最后一行的末尾的边缘。
- end-edge标点可能会挂起以外的所有行结束边缘。