- CSS3网页设计从入门到精通（微课精编版）
- 前端科技
- 3344字
- 2021-03-26 03:49:47
4.1 CSS3文本模块
早期CSS文本功能就是设置字体、字号、颜色、样式、粗细、间距等。CSS3的文本功能不再局限于这些基本设置，它优化了已经存在的各个属性，整合了各种不兼容的私有属性，给文本添加一些高级属性，并作为一个独立的模块进行开发，以尽快完善和迭代CSS文本功能。
4.1.1 文本模块概述
CSS3文本模块（TextModule）把与文本相关的属性单独进行规范。文本模块的最早版本是在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年版本相比，也进行了适当修订，其中增加了text-emphasis和text-outline属性，移出了font-emphasis属性，其他更多改动细节请参阅官方文档。
4.1.2 文本溢出
text-overflow属性可以设置超长文本省略显示。基本语法如下：
text-overflow: clip | ellipsis
适用于块状元素，取值简单说明如下。
clip：当内联内容溢出块容器时，将溢出部分裁切掉，为默认值。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为“...”。
提示：在早期W3C文档（http://www.w3.org/TR/2003/CR-css3-text-20030514/#textoverflow-mode）中，text-overflow被纳入规范，但是在最新修订的文档（http://www.w3.org/TR/css3-text/）中没有再包含text-overflow属性。
由于W3C规范放弃了对text-overflow属性的支持，所以Mozilla类型浏览器也放弃了对该属性的支持。不过，Mozilla developer center推荐使用-moz-binding的CSS属性进行兼容。Firefox支持XUL（XUL，一种XML的用户界面语言），这样就可以使用-moz-binding属性来绑定XUL里的ellipsis属性了。
注意：text-overflow属性仅是内容注解，表明当文本溢出时是否显示省略标记，并不具备样式定义的特性。要实现溢出时产生省略号的效果，还应定义两个样式：强制文本在一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
【示例】下面示例设计新闻列表有序显示，对于超出指定宽度的新闻项，则使用text-overflow属性省略并附加省略号，避免新闻换行或者撑开版块，演示效果如图4.1所示。
图4.1 设计固定宽度的新闻栏目
示例代码如下：
4.1.3 文本换行
在CSS3中，使用word-break属性可以定义文本自动换行。基本语法如下：
word-break: normal | keep-all | break-all
取值简单说明如下。
normal：为默认值，依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
keep-all：对于中文、韩文、日文不允许字断开。适合包含少量亚洲文本的非亚洲文本。
break-all：与normal相同，允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，如使连续的英文字母间断行。
提示：word-break原来是IE私有属性，在CSS3中被Text模块采用，得到Chrome和Safari等浏览器的支持，但不支持keep-all取值。
另外，IE自定义了多个换行处理属性：line-break、word-break、word-wrap，CSS1也定义了white-space。这几个属性简单比较如下。
line-break：指定如何（或是否）断行。除了Firefox，其他浏览器都支持。取值说明如下所示。
auto：使用默认的断行规则分解文本。
loose：使用最松散的断行规则分解文本，一般用于短行的情况，如报纸。
normal：使用最一般的断行规则分解文本。
strict：使用最严格的断行原则分解文本。
word-wrap：允许长单词或URL地址换行到下一行。所有浏览器都支持。取值说明如下。
normal：只在允许的断字点换行（浏览器保持默认处理）。
break-word：在长单词或URL地址内部进行换行。
word-break：指定怎样在单词内断行。取值说明参考上面语法。
white-space：设置如何处理元素中的空格，所有浏览器都支持。取值说明如下。
normal：默认处理方式。
pre：使用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。
nowrap：强制在同一行内显示所有文本，合并文本间的多余空白。
pre-wrap：使用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line：保持文本换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
【拓展】
在IE浏览器下，使用“word-wrap:break-word;”声明可以确保所有文本正常显示。在Firefox浏览器下，中文不会出现任何问题，英文语句也不会出现问题。但是，长串英文会出现问题。为了解决长串英文问题，一般将“word-wrap:break-word;”和“word-break:break-all;”声明结合使用。但是，这种方法会导致普通英文语句中的单词被断开显示（IE下也是）。
为了解决这个问题，可使用“word-wrap:break-word;overflow:hidden;”，而不是“word-wrap:breakword;word-break:break-all;”。“word-wrap:break-word;overflow:auto;”在IE下没有任何问题，但是在Firefox下，长串英文单词就会被遮住部分内容。
【示例】下面示例在页面中插入一个表格，由于标题行文字较多，标题行常被撑开，影响了浏览体验。为了解决这个问题，借助CSS换行属性进行处理，比较效果如图4.2所示。
图4.2 禁止表格标题文本换行显示
4.1.4 书写模式
CSS3增强了文本布局中的书写模式，在CSS2.1定义的direction和unicode-bidi属性基础上，新增writing-mode属性。基本语法如下：
writing-mode: horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
取值简单说明如下。
horizontal-tb：水平方向自上而下的书写方式，类似IE私有值lr-tb。
vertical-rl：垂直方向自右而左的书写方式，类似IE私有值tb-rl。
vertical-lr：垂直方向自左而右的书写方式。
lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面显示。
tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符（如拉丁字母或片假名）顺时针旋转90°。
权威参考：http://www.w3.org/TR/CSS-writing-modes-3/。
【拓展】
direction设置文本流方向，取值包括：ltr，文本流从左到右；rtl，文本流从右到左。unicode-bidi用于在同一个页面里定义从不同显示方向的文本，与direction属性一起使用。
【示例1】下面示例设计唐诗从右侧流入，自上而下显示，效果如图4.3所示。
图4.3 设计唐诗传统书写方式
【示例2】配合margin-top: auto和margin-bottom: auto声明，设计栏目垂直居中效果，如图4.4所示。
图4.4 设计垂直居中布局
【示例3】下面示例设计一个象棋棋子，然后定义当超链接被激活时，首行文本缩进4px，由于使用了垂直书写模式，则文本向下移动4px，就可以模拟一种动态下沉效果，如图4.5所示。
图4.5 设计动态下沉特效
4.1.5 initial值
initial表示初始化属性的值，所有的属性都可以接受该值。如果想重置某个属性为浏览器默认设置，那么就可以使用该值，这样就可以取消用户定义的CSS样式。
注意：IE暂不支持该属性值。
【示例】在下面示例中，页面中插入了4段文本，然后在内部样式表中定义这4段文本蓝色、加粗显示，字体大小为24px，显示效果如图4.6所示。
图4.6 定义段落文本样式
如果想禁止第1句和第3句使用用户定义的样式，只需在内部样式表中添加一个独立样式，然后把文本样式的值都设为initial值即可。具体代码如下所示，运行结果如图4.7所示。
图4.7 恢复段落文本样式
在浏览器中可以看到，第1句和第3句文本恢复为默认的黑色、常规字体，大小为16px。
4.1.6 inherit值
inherit表示属性能够继承祖先的设置值，所有的属性都可以接受该值。
【示例】下面示例设置一个包含框，高度为200px，包含两个盒子，定义盒子高度分别为100%和inherit，正常情况下都会显示200px，但是在特定情况下，例如定义盒子绝对定位显示，则设置“height:inherit;”能够按预期效果显示，而“height:100%;”就可能撑开包含框，效果如图4.8所示。
图4.8 比较inherit和100%高度效果
【补充】
inherit表示继承属性值，一般用于字体、颜色、背景等；auto表示自适应，一般用于高度、宽度、外边距和内边距等关于长度的属性。
4.1.7 unset值
unset表示擦除用户声明的属性值，所有的属性都可以接受该值。如果属性有继承的值，则该属性的值等同于inherit，即继承的值不被擦除；如果属性没有继承的值，则该属性的值等同于initial，即擦除用户声明的值，恢复初始值。
注意：IE和Safari暂时不支持该属性值。
【示例】下面示例设计4段文本，第1段和第2段位于<div class="box">容器中，设置段落文本显示为30px的蓝色字体，现在擦除第2段和第4段文本样式，则第2段文本显示继承样式，即12px的红色字体，而第4段文本显示初始化样式，即16px的黑色字体，效果如图4.9所示。
图4.9 比较擦除后文本效果
4.1.8 all属性
all属性表示CSS的所有属性，但不包括unicode-bidi和direction这两个CSS属性。
注意：IE暂时不支持该属性。
【示例】针对4.1.7节示例，我们可以简化p.unset类样式。
如果在样式中声明的属性非常多，使用all会极为方便，可以避免逐个设置每个属性。