word-wrap 換行

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

1. 官方定義

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

2. 慕課解釋

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

3. 語(yǔ)法

word-wrap: normal|break-word;

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

屬性值

4. 兼容性

5. 實(shí)例

1. 對(duì)超出元素區(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)驗(yàn)分享

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

最后我們?cè)谝淮螌?duì)比下這兩個(gè)屬性

<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;
}

效果圖

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

7. 小結(jié)

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