在了解这个前，首先要说的是它只用于英文。

word-wrap 允许长单词或 URL 地址换行到下一行。

当英文单词，或者一段很长且中间没有空格的的文本超出文本所在元素边缘时候，直接将超出的部分换行，而不是把这个连续的文本直接全部另起一行。

word-wrap: normal|break-word;

.demo{
    word-wrap:break-word;
}

值

<div class="demo">
    class.imooc.com class.imooc.com
</div>
<div class="demo demo-1">
    class.imooc.com class.imooc.com
</div>

.demo{
    background: #ccc;
    width: px;
    height: px;   
    margin-bottom: px;                     
}
.demo-1{
    word-wrap: break-word;        
}

图

说明： 上图是没有使用换行的。下图使用了换行。

这个有近似wrod-break,我们通过表面意思进行区分。wrod-wrap主要是换行，wrod-break是用来英文单子怎么在内断开的。

最后我们在一次对比下这两个

<div class="demo">
    class.imooc.com class.imooc.com
</div>
<div class="demo demo-1">
    class.imooc.com class.imooc.com
</div>
<div class="demo demo-2">
    class.imooc.com class.imooc.com
</div>

.demo{
    background: #ccc;
    width: px;
    height: px;   
    margin-bottom: px;      
                 
}
.demo-1{
    word-wrap: break-word;        
}
.demo-2{
    word-break:break-all;
}

图

说明 从左往右，第一张图什么都不设定，第二张图设置word-wrap: break-word,它在空格处换行了。而第三章图设置word-break:break-all;在空格处没有换行而是打破了连续的单词。