word-break 文本打斷

這個(gè)屬性主要用來(lái)處理英文單詞，在超出一行之后如何換到下一行的規(guī)則。

1. 官方定義

word-break 屬性規(guī)定自動(dòng)換行的處理方法。

2. 解釋

一段英文段落，在其文本所在的元素邊緣通常都會(huì)把整個(gè)單詞另起一行，而這個(gè)屬性可以打破這種排版方式，讓這個(gè)段落的英文單詞都是分開(kāi)的，同漢字一樣，在元素的邊緣只是最后一個(gè)字母換行。

3. 語(yǔ)法

word-break: normal|break-all|keep-all;

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

屬性值

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

效果圖

說(shuō)明： 上圖是沒(méi)有使用換行屬性的效果。下圖使用了換行屬性

2. 僅對(duì)段落中的半角空格和連字符進(jìn)行換行。

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

.demo-2{
    background: #ccc;
    width: px;
    height: px;   
    word-break: keep-all;                    
}

效果圖

說(shuō)明： 如圖第一行的結(jié)尾使用了連字符所以后面的英文字符換行了，第二行使用了空格所以后面的也換行了，而第三行沒(méi)有空格或連字符因此沒(méi)有換行。

6. 經(jīng)驗(yàn)分享

這個(gè)屬性用來(lái)處理當(dāng)我們不想讓 一個(gè)英文單詞直接下一行，而是從中間斷開(kāi)，斷開(kāi)的地方換行例如我們使用連字符的時(shí)候。

7. 小結(jié)

1. 這個(gè)和 word-wrap有區(qū)別， word-wrap必須要是連續(xù)的英文字符,而它沒(méi)有限制，所以不要記混。

2. 這個(gè)屬性對(duì)英文字符、半角空格、連字符都起作用。