|
4、text-indent
设置对象中的文本的缩进，语法为：
text-indent: length
length的默认值为0，允许为负值。
在被另一个对象（如<br>）断开的对象内不能应用本属性。
5、text-overflow
设置是否使用一个省略标记“…”，以标示对象内的文本有溢出。这是IE专有属性，语法为：
text-overflow : clip | ellipsis
clip是默认值，表示当文本有溢出时，不显示省略标记，而是简单裁切；ellipsis表示当对象内文本溢出时，显示省略标记。这个属性仅仅作用于水平方向的文本，当行内的文本超出可用宽度却没有换行机会的时候。
要强制溢出发生并且应用ellipsis值，必须设置对象的white-space属性值为nowrap。假如没有换行机会（例如对象容器的宽度狭窄，并且内有很长的没有合理断行的文本），没有应用nowrap也有可能溢出。最好的选择是设置overflow属性为hidden。当设置overflow属性为scroll或者auto时，此属性也会应用，但是会有滚动条出现。
不过，即使一切都按要求设置，“…”也不一定能显示。
下面我们看看white-space和overflow属性。
6、white-space
设置对象内空格字符的处理方式。语法为：
white-space: normal | pre | nowrap
normal是默认值，表示默认处理方式：文本自动处理换行；pre表示换行和其他空白字符都将受到保护，但有时不会有作用；nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇<br>对象强制换行。
一般来说，空格字符，像换行符、空格符、制表符，在HTML文档中默认的是被忽略的。因此，当white-space属性被设置为normal或者nowrap时，可以使用不换行空格的命名实体 来添加空格，用<br>来添加换行。
7、overflow
设置当对象的内容超过其指定高度及宽度时，如何管理内容。语法为：
overflow: visible | auto | hidden | scroll
各个取值的意义如下：
● visible：是默认值，表示不剪切内容、也不添加滚动条。此时，对象将以包含对象的window或frame的尺寸裁切。
● auto：在必需时，对象内容才会被裁切或显示滚动条。
● hidden：不显示超过对象尺寸的内容。
● scroll：总是显示滚动条。
绝大部分标记的overflow的默认值是visible，除了<textarea>和<body>的默认值是auto。如果设置<textarea>标记的verflow属性值为hidden，将隐藏其滚动条。
对于<table>来说，假如table-layout属性设置为fixed，则<td>支持带有默认值为hidden的overflow属性；如果overflow设为scroll或者auto，那么超出<td>尺寸的内容将被剪切；如果设为visible，将导致额外的文本溢出到右边或左边的单元格。
【例17】测试文本的缩进、换行和溢出设置。
<html>
<head>
<title>itsway ---- 文本样式</title>
<style type = "text/css">
.p1{margin: 0; text-indent: 1cm; white-space:nowrap; text-overflow:clip;
background-color:transparent; font-size: 10pt;}
.p2{margin: 0; text-indent: -1cm; white-space:normal;
background-color:transparent; font-size: 10pt;}
.p3{margin: 0; text-indent: 0; white-space:nowrap; text-overflow:ellipsis;
overflow:hidden; background-color:transparent; font-size: 10pt; }
.p4{margin: 0; text-indent: 10px; white-space:normal; text-overflow:clip;
overflow:scroll; background-color:transparent; font-size: 10pt;}
.ta1{margin: 5px; text-indent: 20px; white-space:normal; text-overflow:ellipsis;
overflow:auto; font-size: 10pt;background-color:transparent; }
.ta2{margin: 5px; text-indent: 20px; white-space:nowrap; text-overflow:ellipsis;
overflow:hidden; font-size: 10pt;background-color:transparent; }
table.zeropadding{padding:5; table-layout:fixed }
</style>
</head>
<body>
<table border = "1" cellpadding = "0" cellspacing = "0"
bordercolor = "red" class = "zeropadding">
<tr>
<td width = "100px">
<p class = "p1">生当做人杰，死亦为鬼雄。</p></td>
<td width = "100px">
<p class = "p2">至今思项羽，不肯过江东。</p></td>
</tr>
</table>
<p></p>
<table border = "1" cellpadding = "0" cellspacing = "0"
bordercolor = "red" class = "zeropadding">
<tr>
<td width = "100px">
<p class = "p3">离离原上草，一岁一枯荣。</p></td>
<td width = "100px">
<p class = "p4">野火烧不尽，春风吹又生。</p></td>
</tr>
</table>
<form><br>
<textarea name = "text1" id = "text1" rows = "3" cols = "40"
class = "ta1" >Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves, who had been seared in the flames of withering injustice.
</textarea><br>
<textarea name = "text2" id = "text2" rows = "3" cols = "40"
class = "ta2" >Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves, who had been seared in the flames of withering injustice.
</textarea>
</form>
</body>
</html>
在三大浏览器中的浏览结果如下图所示。
可以看出，Firefox和Netscape再一次保持了一致，在处理溢出时，它们将文字跨到了其他单元格中，并且在必要时会伸展单元格。IE显得很“特立独行”。为了让三者都保持一致，很有必要设置overflow属性，而不是仅使用IE专有的text-overflow属性。但浏览器对overflow的处理也不尽一致。
在本例中的那段英语选自马丁●路德●金的著名演讲I have a dream（我有一个梦）。文本域在不同浏览器中的显示也不同。当内容过多时，即使overflow设置为hidden，Netscape和Firefox仍会显示滚动条。
上一篇：12、文本样式（1） 下一篇：14、文本样式（3）
|
