CSS-word

下面是一些关于word的属性区别，主要通过的实际的测试来加深一下印象，算是一个简单的总结吧。

1. word-break 和 word-warp

我们在显示数据时，经常会发现这样的一些问题：

对于默认的一些文字，它所在的容器并不能完全容纳，所以便会出现这样的问题，文字溢出。
对于这样的问题，解决方法也很简单，那就是使用word-break:break-all;或者是word-warp:break-word;

对于上述的问题，其实两者的效果是相同的，如上。

那么两者的差别在哪呢？
word-break:break-all

word-warp:break-word

上面是两者之间的不同之处，我们可以看到当剩下的空间不够时，break-all会拆分单词，而break-word不会。

2.word-spacing //规定段落间的字间距

下面的是设置为20px的字间距

3.white-spacing

white-space:normal | pre | nowarp | pre-warp | pre-line
(默认normal)
normal:浏览器会自动合并空白符
pre:浏览器会保留空白符并在当前行显示知道遇到
nowarp:浏览器会不会自动换行
pre-warp:保留空白符，正常换行
pre-line:合并空白符，正常换行

4.text-overflow:ellipsis || clip;

允许设置溢出的文本部分如何像用户显示
例如：

    white-space: nowrap;
    overflow: hidden;       
    text-overflow:ellipsis;

上面是使用的省略号，你也可以换用clip直接截断。
此外，火狐浏览器还支持自定义的显示方式，例如：“text-overflow：‘嘿嘿嘿’”

暂时就这样吧，以后有兴致在继续。。。