我在 http://www.w3school.com.cn/cs... 和 http://www.w3school.com.cn/cs... 上看到如下解释 word-wrap 属性允许长单词或 URL 地址换行到下一行。 word-break 属性规定自动换行的处理方法。但是我看到 word-wrap:break-word word-break:break-all 中实现的效果是一样的，他们的区别在哪里？在实际使用的我们应该怎么用这两个属性？

每种语言都有各自的默认断字规则，也就是在哪个位置可以插入 break-points (断点)，当可能会换行显示时，会根据这些断点来决定从文字的哪个位置开始换行。比如汉字你好吗的断点你·好·吗，中间的点表示断点的位置；比如英文 hello world 的断点 hello·world ; 那么，我们可能想要改变这些默认的断点规则， word-break 属性就是做这个的，它会改变默认的断点规则。当设置 word-break: break-all; 的时候，上面的汉字断点规则没有改变，英文的断点除了默认的空白符和符号断点外，还会在任意两个字母之间添加断点，也就是说任意两个字母之间的位置也是可以断开的，此时英文 hello world 的断点就变为 h·e·l·l·o·w·o·r·l·d ; 所以， word-break 的本质是更改断点规则。 word-wrap 的设计目的是当文字可能会造成溢出的情况下所做的排版。 This property specifies whether the UA may arbitrarily break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box. word-wrap 的取值 break-word 的解释如下：所以，当文字排版的时候，首先会按照 word-break 的断点规则进行排版，在根据断点排版完成之后，会根据 word-wrap 的取值查看是否需要在上次的排版结果上再排版； word-break: break-word; 表示在根据断点排版完成之后，如果存在行溢出的情况，可以在溢出点处断开文字，换行显示。举例如下： <body> <div> sdf sfsdfsdjhgfhsjdgfhsdgfsdfjshdfsjdfjsdfhskjdfhskjdfh def jdhfjdhsfjdhsfjhfasdf </div> </body> div { width:100px; background:red; word-break: break-all; word-wrap: break-word; } 当不设置 word-break 和 word-wrap 的时候，因为默认的英文断点就是空白符和标点符号，所以断点只存在于单词之间，显示结果1如下：当只设置 word-break: break-all; 的时候，此时断点的位置除了默认的断点位置之外，任意两个字母之间也存在断点，显示结果2如下：当只设置 word-wrap: break-word; 的时候，会在显示结果1 的基础上在可能溢出的地方断行，由显示结果1可知有两处造成溢出的地方，显示结果3如下：当同时设置 word-break: break-all;word-wrap: break-word; 的时候，首先应用断点之后的效果如显示结果2 所示，此时的显示结果没有可能造成溢出的地方，所以虽然设置了 word-wrap: break-word; 但是并没有可供它起作用的地方，显示结果如下，可见和显示结果2一样：综上， word-break: break-all; 和 word-wrap: break-word; 的设计目的不一样，排版的本质也不一样，所以显示效果根据不同的情况可能会不一样。

css中，word-wrap和word-break的区别是什么？

2 个回答

得票最新

luckness

6.2k2216

发布于
2017-06-21

✓ 已被采纳

每种语言都有各自的默认断字规则，也就是在哪个位置可以插入break-points(断点)，当可能会换行显示时，会根据这些断点来决定从文字的哪个位置开始换行。
比如汉字你好吗的断点你·好·吗，中间的点表示断点的位置；
比如英文hello world的断点hello·world;

那么，我们可能想要改变这些默认的断点规则，word-break属性就是做这个的，它会改变默认的断点规则。

当设置word-break: break-all;的时候，上面的汉字断点规则没有改变，英文的断点除了默认的空白符和符号断点外，还会在任意两个字母之间添加断点，也就是说任意两个字母之间的位置也是可以断开的，此时英文hello world的断点就变为h·e·l·l·o·w·o·r·l·d;
所以，word-break的本质是更改断点规则。
word-wrap的设计目的是当文字可能会造成溢出的情况下所做的排版。

This property specifies whether the UA may arbitrarily break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box.

word-wrap的取值break-word的解释如下：

所以，当文字排版的时候，首先会按照word-break的断点规则进行排版，在根据断点排版完成之后，会根据word-wrap的取值查看是否需要在上次的排版结果上再排版；
word-break: break-word;表示在根据断点排版完成之后，如果存在行溢出的情况，可以在溢出点处断开文字，换行显示。
举例如下：
```
<body>
    <div>
        sdf
        sfsdfsdjhgfhsjdgfhsdgfsdfjshdfsjdfjsdfhskjdfhskjdfh
        def
        jdhfjdhsfjdhsfjhfasdf
    </div>
</body>
```
```
div {
    width:100px;
    background:red;
    word-break: break-all;
    word-wrap: break-word;
}
```
当不设置word-break和word-wrap的时候，因为默认的英文断点就是空白符和标点符号，所以断点只存在于单词之间，显示结果1如下：

当只设置word-break: break-all;的时候，此时断点的位置除了默认的断点位置之外，任意两个字母之间也存在断点，显示结果2如下：

当只设置word-wrap: break-word;的时候，会在显示结果1的基础上在可能溢出的地方断行，由显示结果1可知有两处造成溢出的地方，显示结果3如下：

当同时设置word-break: break-all;word-wrap: break-word;的时候，首先应用断点之后的效果如显示结果2所示，此时的显示结果没有可能造成溢出的地方，所以虽然设置了word-wrap: break-word;但是并没有可供它起作用的地方，显示结果如下，可见和显示结果2一样：
综上，word-break: break-all;和word-wrap: break-word;的设计目的不一样，排版的本质也不一样，所以显示效果根据不同的情况可能会不一样。