CSS3 Text Effects介绍

常见的文本格式处理主要是对齐方式及字体大小颜色等等。CSS3中主要是添加了字体阴影以及对换行和溢出的处理。相对来看，换行是一个比较棘手的问题，由于实际文章中多以单词呈现，各个浏览器的兼容也不尽相同，部分甚至无法识别 word-wrap 的属性值，所以如果无法达到效果时我们还是得另辟蹊径。

好了下面简单看下 我的测试样式代码吧

<style type="text/css">
<!--
.word-wraps { width:300px; border:1px solid #999999;padding:5px;margin:10px;}
.div1 {word-wrap:normal; }
.div2 {word-wrap:break-word; }
.text-overflows{ overflow:hidden; width:300px; white-space:nowrap; border:1px solid #999999;padding:5px;margin:10px;}
.div3  {text-overflow:clip; }
.div4  {text-overflow:ellipsis; }
.text-shadows{  width:300px; white-space:nowrap; border:1px solid #999999;padding:5px;margin:10px;}
.div5  {text-shadow:5px 1px 6px #000; }
.div6  {text-shadow:0 0 5px #f00; }
-->
</style>
<div class="word-wraps div1">
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
</div>
<div class="word-wraps div2">
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
</div>
<div class="text-overflows div3">
textoverflo wstextoverflowstextoverflowstextoverflowstextoverflows
</div>
<div class="text-overflows div4">
textoverflowste xtoverflowstextoverflowstextoverflowstextoverflows
</div>
<div class="text-shadows div5">
text shadow
</div>
<div class="text-shadows div6">
text shadow
</div>

字符串换行中（word-wrap）

normal：控制连续文本换行。

break-word：内容将在边界内换行。如果需要，词内换行（word-break）也会发生。

至于溢出处理用的就比较少了

clip：不显示省略标记（...），而是简单的裁切。

ellipsis：当对象内文本溢出时显示省略标记（...）

简单说下文字阴影效果吧，

.div5  {text-shadow:5px 1px 6px #000; }

可以看出有4个取值，个人测试理解来看，参数分别为 偏移顶部距离，偏移左边距离，扩散范围，阴影颜色。

顺便贴下代码效果图吧

先记到这边吧 :-)