4.3 通过CSS控制文本间距与对齐方式
网页由文字组成，而用来表达同一个意思的多个文字组合，可以称为段落。段落是文章的基本单位，同样也是网页的基本单位。段落的放置与效果的显示会直接影响到页面的布局及风格。CSS样式表提供了文本属性来实现对页面中段落文本的控制。
4.3.1 案例12——设置单词之间的间隔
单词之间的间隔如果设置合理，不但能节省整个网页布局空间，还可以给人赏心悦目的感觉，提高访问率。在CSS中，可以使用word-spacing属性直接定义指定区域或者段落中字符之间的间隔。
word-spacing属性用于设定词与词之间的间距，即增加或者减少词与词之间的间隔。其语法格式如下所示。
word-spacing : normal | length
其中属性值normal和length的含义如表4-10所示。
表4-10 单词间隔属性表
【例4.12】（案例文件：ch04\4.12.html）
<!DOCTYPE html> <html> <body> <p style="word-spacing:normal">Welcome to my home</p> <p style="word-spacing:15px">Welcome to my home</p> <p style="word-spacing:15px">欢迎来到我家</p> </body> </html>
在IE 11.0浏览器中浏览效果如图4-12所示，可以看到段落中单词以不同间隔显示。
图4-12 设定单词间隔显示
注意
从上面的显示结果可以看出，word-spacing属性不能用于设定文字之间的间隔。
4.3.2 案例13——设置字符之间的间隔
在一个网页中，词与词之间可以通过word-spacing进行设置，那么字符之间使用什么设置呢？在CSS3中，可以通过letter-spacing来设置字符文本之间的距离。即在文本字符之间插入多少空间，这里允许使用负值，这会让字母之间更加紧凑。其语法格式如下所示。
letter-spacing : normal | length
其属性值含义如表4-11所示。
表4-11 字符间隔属性表
【例4.13】（案例文件：ch04\4.13.html）
<!DOCTYPE html> <html> <body> <p style="letter-spacing:normal">Welcome to my home</p> <p style="letter-spacing:5px">Welcome to my home</p> <p style="letter-spacing:1ex">这里的字间距是1ex</p> <p style="letter-spacing:-1ex">这里的字间距是-1ex</p> <p style="letter-spacing:1em">这里的字间距是1em</p> </body> </html>
在IE 11.0浏览器中浏览效果如图4-13所示，可以看到字符间距以不同大小显示。
图4-13 字符间距效果
注意
从上述代码中可以看出，通过letter-spacing定义了多个字符间距的效果，特别注意，当设置的字间距是-1ex时，文字就会重叠。
4.3.3 案例14——为文本添加下画线、上画线、删除线
在CSS3中，text-decoration属性用于文本修饰，该属性可以为页面提供多种文本修饰效果，例如，下画线、删除线、闪烁等。
text-decoration属性语法格式如下所示。
text-decoration:none|underline|blink|overline|line-through
其属性值含义如表4-12所示。
表4-12 text-decoration属性值
【例4.14】（案例文件：ch04\4.14.html）
打开IE 11.0浏览器，其显示效果如图4-14所示。可以看到段落中出现了下画线、上画线和删除线等。
图4-14 文本修饰显示
注意
blink（闪烁）效果只有Mozilla和Netscape浏览器支持，而IE和其他浏览器（如Opera）都不支持该效果。
4.3.4 案例15——设置垂直对齐方式
在CSS中，可以直接使用vertical-align属性设置垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值，这会使元素降低而不是升高。在表单元格中，这个属性用于设置单元格中的单元格内容的对齐方式。
vertical-align属性语法格式如下所示。
{vertical-align:属性值}
vertical-align属性值有9个预设值可使用，也可以使用百分比。这9个预设值和百分比的含义如表4-13所示。
表4-13 vertical-align属性值
【例4.15】（案例文件：ch04\4.15.html）
在IE 11.0浏览器中浏览效果如图4-15所示，可以看到文字在垂直方向以不同的对齐方式显示。
图4-15 垂直对齐显示
从上面案例中可以看出，上下标在页面中的数学运算或注释标号使用得比较多。顶端对齐有两种参照方式，一种是参照整个文本块，另一种是参照文本。底部对齐同顶端对齐方式相同，分别参照文本块和文本块中包含的文本。
提示
vertical-align属性值还能使用百分比来设定垂直高度，该高度具有相对性，它是基于行高的值来计算的。而且百分比还能使用正负号，正百分比使文本上升，负百分比使文本下降。
4.3.5 案例16——转换文本的大小写
根据需要，将小写字母转换为大写字母，或者将大写字母转换为小写字母，在文本编辑中都是很常见的。在CSS样式中，text-transform属性可用于设置文本字体的大小写转换。text-transform属性语法格式如下所示。
text-transform : none | capitalize | uppercase | lowercase
其属性值含义如表4-14所示。
表4-14 text-transform的属性值
因为文本转换属性仅作用于字母型文本，相对来说比较简单。
【例4.16】（案例文件：ch04\4.16.html）
在IE 11.0浏览器中浏览效果如图4-16所示，可以看到大小写字母转换显示。
图4-16 大小写字母转换显示
4.3.6 案例17——设置文本的水平对齐方式
一般情况下，居中对齐适用于标题类文本，其他对齐方式可以根据页面布局来选择使用。根据需要，可以设置多种对齐，例如水平方向上的居中、左对齐、右对齐或者两端对齐等。在CSS中，可以通过text-align属性进行设置。
text-align属性用于定义对象文本的对齐方式，与CSS2.1相比，CSS3增加了start、end和string属性值。text-align语法格式如下所示。
{ text-align: sTextAlign }
其属性值含义如表4-15所示。
在新增加的属性值中，start和end属性值主要是针对行内元素的，即在包含元素的头部或尾部显示；而<string>属性值主要用于表格单元格中，将根据某个指定的字符对齐。
表4-15 text-align属性表
【例4.17】（案例文件：ch04\4.17.html）
在IE 11.0浏览器中浏览效果如图4-17所示，可以看到文字在水平方向上以不同的对齐方式显示。
图4-17 对齐效果
注意
text-align属性只能用于文本块，而不能直接应用到图像标记<img>。如果要使图像同文本一样应用对齐方式，那么就必须将图像包含在文本块中。如上例，由于向右对齐方式作用于<h3>标记定义的文本块，图像包含在文本块中，所以图像能够同文本一样向右对齐。
提示
CSS只能定义两端对齐方式，并按要求显示，但对于具体的两端对齐文本如何分配字体空间以实现文本左右两边均对齐，CSS并不规定。这就需要设计者自行定义了。
4.3.7 案例18——设置文本的缩进效果
在普通段落中，通常首行缩进两个字符，用来表示这是一个段落的开始。同样在网页的文本编辑中可以通过指定属性来控制文本缩进。CSS的text-indent属性就是用来设定文本块中首行的缩进。
text-indent属性语法格式如下所示。
text-indent : length
其中，length属性值表示百分比数字或由浮点数字和单位标识符组成的长度值，允许为负值。可以这样认为，text-indent属性可以定义两种缩进方式，一种是直接定义缩进的长度，另一种是定义缩进百分比。使用该属性，HTML任何标记都可以让首行以给定的长度或百分比缩进。
【例4.18】（案例文件：ch04\4.18.html）
在IE 11.0浏览器中浏览效果如图4-18所示，可以看到文字以首行缩进方式显示。
图4-18 缩进显示效果
如果上级标记定义了text-indent属性，那么子标记可以继承其上级标记的缩进长度。
4.3.8 案例19——设置文本的行高
在CSS中，line-height属性用来设置行间距，即行高。其语法格式如下所示。
line-height : normal | length
其属性值的具体含义如表4-16所示。
表4-16 行高属性值
【例4.19】（案例文件：ch04\4.19.html）
在IE 11.0浏览器中浏览效果如图4-19所示，可以看到有段文字重叠在一起，即行高设置较小。
图4-19 设定文本行高显示效果
4.3.9 案例20——文本的空白处理
在CSS中，white-space属性用于设置对象内空格字符的处理方式。与CSS2.1相比，CSS3新增了两个属性值。white-space属性对文本的显示有着重要的影响。在标记上应用white-space属性可以影响浏览器对字符串或文本间空白的处理方式。
white-space属性语法格式如下所示。
white-space : normal | pre | nowrap | pre-wrap | pre-line | inherit
其属性值含义如表4-17所示。
表4-17 空白属性值
【例4.20】（案例文件：ch04\4.20.html）
在IE 11.0浏览器中浏览效果如图4-20所示，可以看到处理文字空白的不同方式。
图4-20 处理空白显示
4.3.10 案例21——文本的反排
在网页文本编辑中，通常英语文档的基本方向是从左至右。如果文档中某一段的多个部分包含从右至左阅读的语言，则该语言的方向将正确地显示为从右至左。此时可以通过CSS提供的两个属性unicode-bidi和direction解决这个文本反排的问题。
unicode-bidi属性语法格式如下所示。
unicode-bidi : normal | bidi-override | embed
其属性值含义如表4-18所示。
表4-18 unicode-bidi属性值
direction属性用于设定文本流的方向，其语法格式如下所示。
direction : ltr | rtl | inherit
其属性值含义如表4-19所示。
表4-19 direction属性值
【例4.21】（案例文件：ch04\4.21.html）
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a {color:#000;}
</style>
</head>
<body>
<h3>文本的反排</h3>
<div style="direction:rtl; unicode-bidi:bidi-override; text-align:left">秋
风吹不尽，总是玉关情。
</div>
</body>
</html>
在IE 11.0浏览器中浏览效果如图4-21所示，可以看到文字以反排形式显示。
图4-21 文本反排显示