這個問題的開始於我對中文和英文之前區別的一個疏忽（中文是一個字就是一個單詞，而英文字母要有一個空格才將他們分割為一個單詞）；
<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:
word-break：
區別就是長單詞在word-wrap作用下換到下一行，后面可以正常還行，word-break的作用下利用了上一行沒有用完的空間。
感悟：有些不起眼的小屬性平常可能覺得無關緊要，可是在有些恰恰好的情況下確可以充當救世主的角色。
本文有參考@無雙 對這兩個屬性的區別分析。