CSS3文本模块

课后整理 2020-12-9

早期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年版本相比,进行了较大的改动,其中主要改动说明如下。

最新版本的文本模型与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属性。取值简单说明如下。

white-space

语法说明如下:

white-space:normal|pre|nowrap|pre-wrap|pre-line;

white-space初始值为无,适用于所有元素。该属性设置或检索对象内空格字符的处理方式。它是white-space-collapse和textwrap属性的简便用法,但并没有包含white-space-collapse和text-wrap属性的所有功能。与CSS2.1版本相比,新增了两个属性值。取值简单说明如下。

word-break

语法说明如下:

word-break:normal|keep-all|loose|break-strict|break-all;

word-break属性初始值为normal,适用于所有元素。该属性设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all。取值简单说明如下。

text-wrap

语法说明如下:

text-wrap:normal|unrestricted|none|suppress;

text-wrap属性的初始值为normal,适用于所有元素。CSS3定义文本换行通过text-wrap和word-wrap两个属性来控制。text-wrap属性设置或检索对象内文本的换行模式。取值简单说明如下。

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,但是重新规划了取值。取值简单说明如下。

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,适用于所有元素及其内容。该属性检索或设置标点符号的修剪。取值简单说明如下。

text-emphasis

语法说明如下:

text-emphasis:none|[[accent|dot|circle|disc][before|after]?];

text-emphasis初始值为none,适用于所有元素及其内容。该属性检索或设置重点文本样式。取值简单说明如下。

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,适用于块状元素、行内块状元素或者表格单元格。该属性检索或设置对象是否悬挂一个标点符号。取值简单说明如下。