word-wrap 換行

在了解這個屬性前，首先要說的是它只用于英文。

1. 官方定義

word-wrap 屬性允許長單詞或 URL 地址換行到下一行。

2. 慕課解釋

當一個英文單詞，或者一段很長且中間沒有空格的英文字母的文本超出文本所在元素邊緣時候，直接將超出的部分換行，而不是把這個連續(xù)的文本直接全部另起一行。

3. 語法

word-wrap: normal|break-word;

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

屬性值

4. 兼容性

5. 實例

1. 對超出元素區(qū)域的的文本換行。

<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: 100px;
    height: 100px;   
    margin-bottom: 10px;                     
}
.demo-1{
    word-wrap: break-word;        
}

效果圖

說明： 上圖是沒有使用換行屬性的效果。下圖使用了換行屬性。

6. 經(jīng)驗分享

這個屬性有一個近似屬性wrod-break,我們通過表面意思進行區(qū)分。wrod-wrap主要是換行，wrod-break是用來英文單子怎么在內(nèi)斷開的。

最后我們在一次對比下這兩個屬性

<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: 100px;
    height: 100px;   
    margin-bottom: 10px;      
                 
}
.demo-1{
    word-wrap: break-word;        
}
.demo-2{
    word-break:break-all;
}

效果圖

說明 從左往右，第一張圖什么都不設定，第二張圖設置word-wrap: break-word,它在空格處換行了。而第三章圖設置word-break:break-all;在空格處沒有換行而是打破了連續(xù)的單詞。

7. 小結

1. 必須要是連續(xù)的英文字符。
2. 這個屬性主要是對英文起作用，如果中英文混雜，則優(yōu)先把中文和英文先換行，然后再打破連續(xù)的英文單詞。