我們在一些頁面中，需要輸入英文文章，有時候會碰到煩惱：
　　1、容器在較小的時候很輕易的被長單詞給撐開了，超出了原來設(shè)置的寬度，影響了頁面的整體布局，破壞美觀與頁面外觀的結(jié)構(gòu)！
　　2、在輸入英文句子的時候，單詞不能自動斷開，行尾部空著很多，但寬度容不下一個單詞，它就自動跑到下一行去了。導(dǎo)致頁面文本區(qū)域右側(cè)參差不齊。

　　碰到這樣的問題，我們該如何解決呢？CSS為我們提供了兩個屬性word-break、word-wrap。我們可以利用它們來對我們的文本進行控制。使長英文單詞或句子，以我們預(yù)想的形式顯示出來！


　　我們看下面的例子，看設(shè)置后的效果與不作任何設(shè)置的變化！

　　不作任何設(shè)置的情形：


　　上面容器的單詞出現(xiàn)了右部很多的空白，中間的容器是參考寬度的空容器，下面的容器被長單詞給撐開了。

　　我們加上word-wrap: break-word;看下面的效果：


　　最下面的容器沒有被撐開，而是長單詞自動的進行了換行。這樣就不會影響布局了。但上面容器的單詞右部很多的空白依然存在。

　　我們加上word-break : break-all;看下面的效果：


　　上面的容器右側(cè)沒有出現(xiàn)空白，盡量多的寫單詞字母。最下面的容器也沒有被容器撐開。其實這兩個屬于還有其它的用途，有愛好的朋友可以繼續(xù)深入學(xué)習(xí)：關(guān)于word-break請參考這里；關(guān)于word-wrap請參考這里。