4.2 CSS3中新增的文本高级样式
对于一些特殊要求的文本，例如文字存在阴影、字体种类发生变化，如果再使用上面所介绍的CSS样式进行定义，其结果就不会正确显示，这时就需要一些特定的CSS标记来实现这些要求。
4.2.1 案例8——添加文本的阴影效果
在显示字体时，有时根据需求，需要给出文字的阴影效果，以增强网页整体的吸引力，并且为文字阴影添加颜色。这时就需要用到CSS3样式中的text-shadow属性。实际上，在CSS2.1中，W3C就已经定义了text-shadow属性，但在CSS3中又重新定义了它，并增加了不透明度效果。其语法格式如下所示。
{text-shadow ： none | <length> none | [<shadow>, ] * <opacity> 或none |
<color> [, <color> ]* }
其属性值如表4-6所示。
表4-6 text-shadow属性值
text-shadow属性有四个属性值，最后两个是可选的，第一个属性值表示阴影的水平位移，可取正负值；第二个值表示阴影垂直位移，可取正负值；第三个值表示阴影模糊半径，该值可选；第四个值表示阴影颜色值，该值可选。如下所示。
text-shadow:阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值); 阴影模糊值; 阴影颜色
【例4.8】（案例文件：ch04\4.8.html）
<!DOCTYPE html> <html> <body> <p align=center style="text-shadow:0.1em 2px 6px blue;font-size:80px;">这是 TextShadow的阴影效果</p> </body> </html>
在IE 11.0浏览器中浏览效果如图4-8所示，可以看到文字居中并带有阴影效果。
图4-8 阴影显示结果
通过上面的案例，可以看出阴影偏移由两个length值指定到文本的距离。第一个长度值指定到文本右边的水平距离，负值会把阴影放置在文本左边。第二个长度值指定到文本下边的垂直距离，负值会把阴影放置在文本上方。在阴影偏移之后，可以指定一个模糊半径。
4.2.2 案例9——设置文本溢出效果
text-overflow属性用来定义当文本溢出时是否显示省略标记，即定义省略文本的处理方式，并不具备其他样式属性定义。要实现溢出时产生省略号的效果还需定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
text-overflow语法如下所示。
text-overflow ： clip | ellipsis
其属性值含义如表4-7所示。
表4-7 text-overflow属性表
【例4.9】（案例文件：ch04\4.9.html）
在IE 11.0浏览器中浏览效果如图4-9所示，可以看到文字在指定位置被裁切，但ellipsis属性被执行，以省略号形式出现。
图4-9 文本省略处理
4.2.3 案例10——控制文本的换行
当在一个指定区域显示一整行文字时，如果文字在一行显示不完时，需要进行换行。如果不进行换行，则会超出指定区域范围，此时我们可以采用CSS3中新增加的word-wrap文本样式，来控制文本换行。
word-wrap语法格式如下所示。
word-wrap ： normal | break-word
其属性值含义比较简单，如表4-8所示。
表4-8 word-wrap属性表
【例4.10】（案例文件：ch04\4.10.html）
在IE 11.0浏览器中浏览效果如图4-10所示，可以看到文字在指定位置被控制换行。
图4-10 文本强制换行
可以看出，word-wrap属性可以控制换行，当属性取值break-word时，将强制换行，中文文本没有任何问题，英文语句也没有任何问题。但是对于长串的英文就不起作用了，也就是说，break-word属性用于控制是否断词，而不是断字符。
4.2.4 案例11——设置字体尺寸
有时候在同一行的文字，由于所采用的字体种类不一样或者修饰样式不一样，而导致其字体尺寸即显示大小不一样，整行文字看起来杂乱。此时需要CSS3的属性标签font-size-adjust处理。
font-size-adjust用来定义整个字体序列中，所有字体的大小是否保持同一个尺寸。其语法格式如下所示。
font-size-adjust : none | number
其属性值含义如表4-9所示。
表4-9 font-size-adjust属性表
【例4.11】（案例文件：ch04\4.11 html）
在IE 11.0浏览器中浏览效果如图4-11所示，可以看到同一行的字体大小相同。
图4-11 尺寸一致显示