文本相关属性
文本相关属性用于控制整个段或整个<div.../>元素的显示效果，包括文字的缩进、段落内文字的对齐等显示方式。
➢ text-indent：用于设置段落文本的缩进。默认值为0。被另一个元素（如<br.../>）断开的元素不能应用本属性。
➢ text-overflow：用于控制溢出文本的处理方法。该属性支持如下两个属性值。
□ clip：如果该元素指定了overflow:hidden属性值，当该元素中文本溢出时，clip指定只是简单地裁切溢出的文本。
□ ellipsis：如果该元素指定了overflow:hidden属性值，当该元素中文本溢出时，ellipsis指定裁切溢出的文本，并显示溢出标记（...）。
➢ vertical-align：用于设置目标元素里内容的垂直对齐方式，通常有顶端对齐，底对齐等方式。
□ auto：对元素的文本内容执行自动对齐。
□ baseline：默认值。将支持valign属性的元素的文本内容与基线对齐。
□ sub：将元素的内容与文本下标对齐。
□ super：将元素的内容与文本上标对齐。
□ top：默认值。将支持valign属性的元素的文本内容与元素的顶端对齐。
□ middle：默认值。将支持valign属性的元素的文本内容对齐到元素的中间。
□ bottom：默认值。将支持valign属性的元素的文本内容与元素的底端对齐。
□ length：指定文本内容相对于基线的偏移距离。既可使用百分比形式，也可使用绝对距离形式。
➢ text-align：用于设置目标组件中文本的水平对齐方式。该属性支持left（左对齐）、right（右对齐）、center（居中对齐）和justify（两端对齐）4个属性值。
➢ direction：用于设置文本流入的方向，该属性的合法值有ltr（从左向右）和rtl（从右向左）。此属性不会影响拉丁文字母、数字字符，它们总是以ltr值呈现。但是此属性会作用于拉丁文的标点符号。
➢ word-break：用于设置目标组件中文本内容的换行方式。该属性支持如下3个值。
□ normal：靠浏览器的默认规则进行换行。通常，浏览器的处理规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。
□ keep-all：只能在半角空格或连字符处换行。
□ break-all：设置允许在单词中间换行。
➢ white-space：用于设置目标组件中文本内容对空格的处理方式。该属性支持如下两个属性值。
□ normal：这是默认的处理方式。文本自动处理换行。假如抵达容器边界会转到下一行。
□ nowrap：强制在同一行内显示所有文本，直到文本结束或者遇到<br.../>元素。
➢ word-wrap：用于设置目标组件中文本内容的换行方式。该属性支持如下两个值。
□ normal：靠浏览器的默认规则进行换行。
□ break-word：设置允许在单词中间换行。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>文本相关属性设置</title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000000;
height: 30px;
width: 200px;
}
</style>
</head>
<body>
<!-- 缩进20pt -->
text-indent:20pt <div style="text-indent:20pt">测试文字</div>
<!-- 缩进20pt -->
text-indent:40pt <div style="text-indent:40pt">测试文字</div>
<!-- 居中对齐 -->
text-align:center <div style="text-align:center">测试文字</div>
<!-- 居右对齐 -->
text-align:right <div style="text-align:right">测试文字</div>
<!-- 文本从右边流入 -->
direction:rtl <div style="direction:rtl">测试文字</div>
<!-- 文本从左边流入 -->
direction:ltr <div style="direction:ltr">测试文字</div>
<!-- 强制不换行，直到遇到br标签 -->
white-space:nowrap <div style="white-space:nowrap">
测试文字,疯狂Java讲义，疯狂XML讲义</div>
<!-- 当文字溢出时，只是简单地裁切 -->
text-overflow:clip <div style="overflow:hidden;white-space:nowrap
;text-overflow:clip;">测试文字测试文字测试文字测试文字测试文字测试文字</div>
<!-- 当文字溢出时，裁切之后显示裁切标记 -->
text-overflow:ellipsis <div style="overflow:hidden;white-space:nowrap
;text-overflow:ellipsis;">测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。