關於word-break和word-wrap的使用和區別

這個問題的開始於我對中文和英文以前區別的一個疏忽（中文是一個字就是一個單詞，而英文字母要有一個空格纔將他們分割爲一個單詞）；

<div class="wap">
    <div class="boxer">
        <h1>andy budd</h1>

        <p>這裏應該有一大段文本，吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦不來吧來吧來吧來吧來吧阿聯巴拉巴拉巴拉巴拉巴拉巴拉巴寶莉辣不辣拉巴拉巴拉阿聯巴拉巴拉巴拉巴拉巴拉喇叭喇叭啊來吧來吧落不了了吧巴拉巴拉巴拉巴拉巴拉喇叭喇叭啊來吧來吧落不了了吧巴拉巴拉巴拉巴拉巴拉喇叭喇叭啊來吧來吧落不了了吧巴拉巴拉巴拉巴拉巴拉喇叭喇叭啊來吧來吧落不了了吧巴拉巴拉巴拉巴拉巴拉喇叭喇叭啊來吧來吧落不了了吧</p>

    </div>
    <div class="boxer">
        <h1>richird rutter</h1>

        <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

    </div>
    <div class="boxer">
        <h1>jeremy keith</h1>

        <p>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>

    </div>
</div>

css:
.wap {
    width: 100%;
}
.wap .boxer {
    margin-left: 20px;
    float: left;
    display: inline;
    padding: 20px;
    width: 250px;
}

咱們看到有三段文字，本意是將他們劃分爲三個塊，並列排列，結果是這樣的：

文字部分沒問題，但是英文字母的部分把盒子模型撐的不像樣，緣由其實很簡單就是我上面說的，它們把英文字母看成了一個單詞，不會有換行操做。

咱們其實也常常會遇到這樣狀況，就是文字和英文摻雜的時候沒法對齊。

此時文章的主角登場：word-break和word-wrap，把這兩個元素的其中一個用於包含它們的標籤就解決了這個問題。（這裏就不上圖了）。

來看看官方對他們的解釋：

word-wrap 屬性用來標明是否容許瀏覽器在單詞內進行斷句，這是爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。

word-break 屬性用來標明怎麼樣進行單詞內的斷句。

用法：   word-wrap: normal|break-word;

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

顯然兩個樣式均可以解決換行的問題，那麼它們直接的區別呢？

當一段文字有一個長長長的英文單詞的狀況下使用這兩個屬性的區別：

word-wrap:

 

weiwor

word-break：

區別就是長單詞在word-wrap做用下換到下一行，後面能夠正常還行，word-break的做用下利用了上一行沒有用完的空間。

 

 

感悟：有些不起眼的小屬性日常可能以爲可有可無，但是在有些偏偏好的狀況下確能夠充當救世主的角色。

本文有參考@無雙 對這兩個屬性的區別分析。

 

，，