深入了解 CSS3 新特性（2）

look_w

Word-wrap & Text-overflow 样式Word-wrap先来看看 word-wrap 属性，参考下述代码：
清单 6. word-wrap 案例

1 2 3 4 5 6 7 8

<div style="width:300px; border:1px solid #999999; overflow: hidden"> wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword </div> <div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword </div>

比较上述两段代码，加入了“word-wrap: break-word”，设置或检索当当前行超过指定容器的边界时是否断开转行，文字此时已被打散。所以可见如下的差别：
图 1. 没有 break-word图 2. 有 break-wordText-overflow知道了 word-wrap 的原理，我们再来看看 text-overflow，其实它与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示，见如下示例：
清单 7. Text-overflow 案例

1 2 3 4 5 6 7 8 9 10 11 12

.clip{text-overflow:clip; overflow:hidden; white-space:nowrap;   width:200px;background:#ccc;} .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;   width:200px; background:#ccc;} <div class="clip"> 不显示省略标记，而是简单的裁切条 </div> <div class="ellipsis"> 当对象内文本溢出时显示省略标记 </div>

如清单 7 所示，这里我们均使用“overflow: hidden”，对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。见图 3 的效果图。
图 3. Text-overflow 效果图这里我们可以看到，ellipsis 的显示方式比较人性化，clip 方式比较传统，我们可以依据需求进行选择。
文字渲染（Text-decoration）CSS3 里面开始支持对文字的更深层次的渲染，我们来看看下面的例子：
清单 8. Text-decoration 案例

1 2 3 4 5

div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 2.75px; }

这里我们主要以 webkit 内核浏览器为例，清单 8 的代码效果如图 4：
图 4. Text-decoration 效果图Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度