如何避免容器被長單詞撐開？_Div+CSS教程

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

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


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

　　不作任何設置的情形：


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

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


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

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


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