@dlutwuwei 2014-12-18T02:41:50.000000Z 字数 2371 阅读 720

word-wrap word-break white-space的区别

css

关于这几个关系文字断词换行的属性，大部分人都很迷糊，很多时候都是胡乱添加，这里可以清楚的告诉大家如何正确使用这几个属性。
此处输入图片的描述

word-wrap

用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

normal  只在允许的断字点换行（浏览器保持默认处理）。
break-word  在长单词或 URL 地址内部进行换行。

word-wrap：break-word是最早定义的断句标示，默认是对长单词另起一行输出，再进行换行判断输出。
此处输入图片的描述
word-wrap基本所有浏览器都支持。

word-break

用来标明怎么样进行单词内的断句

normal  使用浏览器默认的换行规则。
break-all   允许在单词内换行。
keep-all    只能在半角空格或连字符处换行。

和word-wrap:break-word稍有不同，break-all会填满当前行再断行
此处输入图片的描述
word-break最早由ie浏览器支持，现在chrome和firefox也基本支持。

white-space

normal  默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap    保留空白符序列，但是正常地进行换行。
pre-line    合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

white-space本身跟单词截断没太大关系，只是对空格和换行符的处理，当然情况下需要用nowrap来忽略换行符，而用word-break和word-wrap去控制换行。

IE和chrome，firefox下的差异

下面是测试的代码，IE和chrome在大部分情况下结果都一样，在某些特殊情况下有不同

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>word-break;word-wrap;测试</title>
</head>
<body>
    <h3>父元素word-break</h3>
    <div style="width:100px; height:90px;word-break:break-all; background-color:#eee">
        <span>1234</span>
        <span>99hhhhhhhhhhhhhhhhhhhhhhhhhhh</span>
    </div>
    <div style="height:12px"></div>
    <h3>父元素word-wrap</h3>
    <div style="width:100px; height:90px;word-wrap:break-word; background-color:#eee">
        <span>1234</span>
        <span>99hhhhhhhhhhhhhhhhhhhhhhhhhhh</span>
    </div>
    <div style="height:12px"></div>
    <h3>内联子元素word-break</h3>
    <div style="width:100px; height:90px; background-color:#eee">
        <span>1234</span>
        <span style="word-break:break-all;">99hhhhhhhhhhhhhhhhhhhhhhhhhhh</span>
    </div>
    <div style="height:12px"></div>
    <h3>内联子元素word-wrap</h3>
    <div style="width:100px; height:90px; background-color:#eee">
        <span>1234</span>
        <span style="word-wrap:break-word;">99hhhhhhhhhhhhhhhhhhhhhhhhhhh</span>
    </div>
    <div style="height:12px"></div>
    <h3>word-wrap</h3>
    <div style="width:100px; height:70px;word-wrap:break-word; background-color:#eee">wu are  99hhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
    <div style="height:12px"></div>
    <h3>word-break</h3>
    <div style="width:100px; height:50px;word-break:break-all; background-color:#eee">wu are 99hhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
</body>
</html>

主要区别在于内联子元素情况下IE6，IE7效果均为word-wrap，chrome和firefox结果正常，IE8，IE9下均失效：

IE6/7 word-break和word-wrap均表现为word-wrap

IE6，IE7

IE8/9 word-break和word-wrap均失效

IE8，IE9

chrome/ff word-break和word-wrap均表现正常

chrome，ff