CSS文本外观属性（知识点2）
知识引入
1.text-indent：首行缩进
text-indent属性是用于定义首行文本的缩进，其属性值可为不同单位的数值，em字符宽度的倍数或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位，下面通过一个案例来演示text-indent属性的使用方法，先写代码，如图1
图1
保存并运行代码，如图2
图2
*注意：text-indent属性仅适用于块级元素，对行内元素无效。
2.text-align:水平对齐方式
Text-align属性用于设置文本内容的水平对齐，相当于HTML中的align对齐属性，其属性值取值为以下三种。
（1）left：左对齐（默认值）。
（2）right:右对齐。
(3)center:;居中对齐。
例如设置二二级标签居中对齐，可使用以下代码。
h2{text-align:center;}
*注意：（1）text-align仅适用于块级元素，对行内元素无效。（2）如果对图像设置水平对齐，，可以为图像添加一个父标签（如
），然后对父标签使用text-align属性就可以实现对图像设置水平对齐。
3.white-space:空白符处理
使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白，在CSS中，使用white-space属性可设置空白符的处理方法，其属性值如下。
（1）normal:常规显示（默认值），文本中的空格，空行无效，满行（到达区域边界）后自动换行。
（2）pre:预格式化，按文档的书写格式保留空格，空行原样显示。
（3）nowrap:空格空行无效，强制文本不能换行，除非遇到换行标签
。内容超出元素的边界也不会换行，若超出浏览器界面则会自动添加滚动条。
下面通过一个案例来演示一下white-space属性的使用方法。
先写代码，如图3
图3
保存显示如图4
图4
从图4和图3可以看出，使用white-space中的pre属性值可以看出定义的文本会保留原有的空白符，在浏览器中会原样显示，使用white-space中的rowrap属性，浏览器定义的文本不会换行，并且浏览器出现了滚动条。
4.text-shadow:阴影效果
Text-shadow属性用于给文本添加阴影效果，其属性的基本格式如下。
选择器{text-shadow:h-shadow v-shadow bluer color;}
在上面的语法格式中，h-shadow用于设置阴影水平偏移的距离,v-shadow用于设置阴影垂直偏移的距离，blur用于设置模糊的半径，color用于设置阴影颜色。
下面通过一个案例来演示一下text-shadow的使用方法。
先写代码，如图5
图5
保存并运行如图6
图6
*注意：（1）阴影的水平或垂直偏移距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。（2）可以使用text-shadow属性给文字添加多个阴影，从而产生阴影叠加的效果，方法为设置多组阴影参数，中间用逗号隔开，如图7的代码。
图7
5.text-overflow:标示对象内溢出文本
text-overflow为CSS3新增属性，该属性用于处理溢出的文本，其基本语法格式如下。
选择器{text-overflow:属性值；}
text-overflow属性常用取值有以下两个。
（1）clip:修剪溢出文本，不显示省略标签“…”。
（2）ellipsis:用省略标签“…”替代被修剪文本，省略标签插入的位置是最后一个字符。
下面通过一个案例来演示一下text-overflow的使用方法。
先写代码，如图8
图8
保存运行如图9
图9
总结图8和图9，可以得出设置省略标签标示溢出文本的具体步骤如下。
(1)为包含文本的对象定义宽度。
（2）应用“white-space:nowrap；”样式强制文本不能换行。
(3)应用“overflow:hidden;”样式隐藏溢出文本。
(4)应用”text-overflow:ellipsis;”样式显示省略标签。
6.word-wrap属性
word-wrap是CSS3的新增属性，该属性用于实现长单词和URL地址的自动换行，其基本语法格式如下。
选择器{word-wrap:属性值；}
word-wrap取值如表3-3所示。
3-3 word-wrap属性值
| 值 |
描述 |
| normal |
只在 允许的断字点换行（浏览器保持默认处理） |
| break-word |
在长单词或URL地址内部进行换行 |
下面通过一个URL地址换行来演示一下word-wrap的使用方法。
先写代码，如图10
图10
保存并运行如图11.
图11
7.以上就是CSS文本外观属性（知识点2）了，下期我们讲用CSS文本外观属性实现的案例。