word-break 文本打斷

這個屬性主要用來處理英文單詞，在超出一行之后如何換到下一行的規則。

1. 官方定義

word-break 屬性規定自動換行的處理方法。

2. 解釋

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

3. 語法

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

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

屬性值

4. 兼容性

5. 實例

1. 對超出元素區域的的文本換行。

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

效果圖

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

2. 僅對段落中的半角空格和連字符進行換行。

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

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

效果圖

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

6. 經驗分享

這個屬性用來處理當我們不想讓 一個英文單詞直接下一行，而是從中間斷開，斷開的地方換行例如我們使用連字符的時候。

7. 小結

1. 這個和 word-wrap有區別， word-wrap必須要是連續的英文字符,而它沒有限制，所以不要記混。

2. 這個屬性對英文字符、半角空格、連字符都起作用。