css排版之word-wrap word-break white-space 用法浅析

word-wrap word-break white-space 用法浅析

我们在对文字排版时有时候会需遇到文字比较多的情况，文字比较多时我们还可能会考虑到文字如何展示，今天我们主要说说文字遇到边界时的一些处理方法。

通常文字遇到边界时是自动换行显示，比如下面的情况：

代码如下：

	
   
   
	
	


	
   
   

    
    
	this is a line;
	this is a line;
	this is a line;
	this is a line;
	this is a line;
	
   
   

结果截图如下：

可以看见其是按照单词为单位来换行的，如果我们想按照字母为单位呢？

这时我们就可以使用word-break来达到效果了，直接在上面的div.div1 的style 里面加入word-break: break-all;即可达到如下图的效果：

可以明显的发现现在的换行方式已经从词变为字母了。

刚刚只是体会一下这几个属性的用法下面我们具体的分析一下这几个属性：

先从word-wrap开始：

语法  word-wrap ： normal | break-word

normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容器的边界，换句话说内容可以撑破容器）；

break-word将内容在边界内换行（不截断英文单词换行，截断英文单词换行需要使用word-break:all属性）。

注意word-wrap直接应用在table中是没有效果的。

还是在最上面的代码的基础上改造，在diiv.div1里面把line这个单词加长为lineASAASASASASASASASASA就是说比盒子还要宽（因为我试验时单词太短以至于normal 与break-word属性值的表现几乎没有差别），下面两张图分别是取值为normal和break-word时的表现。

可以发现取值为normal时会使文本换行，也会冲破容器，但不是在连续的内容，而是被独立的单词给冲破。这个真的是需要自己实践才体会得到啊，刚开始我也理解错了。

可以发现它与上面的区别几乎就是不能冲破容器一样，独立的单词太长也会换行。

好，我们再讲一下word-break：

语法    word-break: normal | break-all | keep-all

与word-wrap一样它也以normal为默认值，如果设置为默认值时中文则到边界处的汉字换行，如果是英文整个单词换行，如果出现某个单词长度过长，则会撑破容器，如果边框为固定属性，则后面部分将无法显示；

break-all：可以强行截断英文单词，达到词内换行效果

keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行，英文单词也整个换行，如果出现某个英文字符长度超过边界，则后面的部分将撑破容器，如果边框为固定属性，则后面部分无法显示

这个其实在最前面部分已经讲过了，还值得注意的就是normal与keep-all的区别主要体现在对汉字的处理上normal是到边界处的汉字换行，而keep-all是把前后标点符号内的一个汉字短语整个换行，另外break-word直接应用在table中是没有效果的。不过可以这样解决：

        table {
           table-layout: fixed;
           width: 100px;/*设置表格宽度*/
        }

这个方法也可以解决word-wrap对table无效的问题。

最后一个white-space：

这个也是最复杂的一个了。

语法     white-space: normal | pre | nowrap | pre-line | pre-wrap | inherit

normal：为其默认值。空白处会被浏览器忽略,往往可以通过设置这个值恢复到默认值下
pre:空白处会被浏览器保留，其行为方式就类似于HTML中的<pre>标签
nowrap:文本不会换行，文本会在同一行上，直到碰到了换行标签<br />为止，
pre-line:合并空白符序列，但保留换行符，此属性不支持IE7.0-,Firefox30-,Opera9.2-下以版本浏览器
pre-wrap:保留空白符序列，但是正常进行换行，此属性值不支技IE70-,Firefox3.0-版本浏览器，
inherit：规定应该从父元素继承white-space属性的值，此属性值在所有的IE版本都不支持

我们先看看在normal时的表现：

pre时：

果然与<pre>一样啊。

nowrap时：

貌似与normal时没什么区别。

在第三行加一个<br>后：

换为normal后：

现在可以看出区别了吧normal对<br>也会换行，但是不会越界。

pre-line：

pre-wrap：

pre-line与pre-wrap都没有加<br>的，这两个都没有越界，但是pre-wrap保留空白符序列。

其实这些属性的使用主要是感受其各自的特点然后按照自己的具体需求来使用即可。