css3.0学习 文本 Text effects
第四节 文本 Text effects
1.text-shadow
语法：
text-shadow:none|<length>none|[<shadow>,]*<shadow>或none|<color>[,<color>]*
相关属性:无
取值：
<color>:指定颜色 原载于:ｆｏｒａｓｐ．ｃｎ
<length>:由浮点数字和单位标识符组成的长度值，可为负值，指定阴影的水平眼神距离；
<opacity>:由浮点数字和单位标识符组成的长度值，不可为负值，指定模糊效果的作用距离，如果你仅仅需要模糊效果，将前两个length全部设定为0
说明：
设置或检索对象中文本的文字是都有阴影及模糊效果，可以设定多组效果，方式是用逗号隔开，可以被用于伪类 :first-letter和:first-line,对应的脚本特性为textShadow 原载于:ｆｏｒａｓｐ．ｃｎ
兼容性：
Firefox3.5，chrome2.0，opera9.64，Safari4支持
代码示例：
<div style="text-shadow:5px 2px 6px #000;">Safari下可以看到效果</div>5px表示水平距离，2px表示垂直距离，6px表示模糊的大小
2.text-overflow
语法：
text-overflow:clip|ellipsis
取值：
clip:不显示省略标记(...),而是简单的裁切
ellipsis:当对象内文本溢出时显示省略标记(...)
说明：
设置或检索是否使用一个省略标记(...)表示对象内文本的溢出，对应的脚本特性为text0verflow;
text-overflow属性仅是注解，当文本溢出时是否显示省略标记，并不具备它的样式属性定义，要实现溢出时产生省略号的效果还须定义，强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果 原载于:ｆｏｒａｓｐ．ｃｎ
兼容性：
text-overflow : clip
IE6,IE7,IE8,Firefox2.0,Firefox3.0，Firefox3.5,chrome1.0,chrome2.0，opera9.63，Safari3.1,Safari4支持
text-overflow:ellipsis
IE6,IE7,IE8,chrome1.0,chrome2.0,Safari3.1,Safari4
代码示例：
<style type="text/css">
.test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}
.test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}
</style>
<h2>text-overflow : clip </h2>
<div class="test_demo_clip">
不显示省略标记，而是简单的裁切条
</div>
<h2>text-overflow : ellipsis </h2>
<div class="test_demo_ellipsis">
当对象内文本溢出时显示省略标记
</div>
3.word-wrap
语法：
word-wrap:normal|break-word
取值：
normal:控制连续文本换行
break-word:内容将在边界内换行，如果需要，词内换行(word-break)也会发生 原载于:ｆｏｒａｓｐ．ｃｎ
说明：
设置或检索当当前行超过指定容器的边界时是否断开转行
兼容性：
IE6,IE7,IE8,Firefox3.5，chrome1.0,chrome2.0,Safari3.1,Safari4支持 原载于:ｆｏｒａｓｐ．ｃｎ
代码示例：
<style type="text/css">
div{ width:300px;word-wrap:break-word;border:1px
solid #999999;}
</style>
<div>
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwr
apbreakword
</div>
转载%77%77%77请%2E%66%6F%72%61%73%70%2E%63%6E注明