目前搬站後的網址：http://knightzone.org/?p=1605

繼上篇我在HTML的部分利用<wbr />進行手動式的字詞分行，有的時候確實令人覺得麻煩，是否可以讓瀏覽器在察覺會超出容器時自動進行分行呢？有的！必須利用CSS，而且還有兩種不同的做法，底下我就來講解這兩種做法該如何使用並且這之間有什麼差別。

遇到長單字或是長網址…

就如同我在上篇所說在HTML裡面，如果打了太長的一連串的英文字，瀏覽器會把它當作一個詞彙，並且不會在空間狹小的時候做分行(除非中間有-,?......等等之類的分隔符，會在分隔符處分行)，而最常遇到這種狀況的地方就是在張貼網址的時候，如下圖：

可以看見的是，網址的部分已經超出容器了，並且會注意到文字中間有奇怪的斷行現象，例如：上圖的點部落的部和落之間以及Rosetta Code兩個字之間。這個換行導致了後方多出了一塊空白，而之所以出現這樣的換行是因為瀏覽器發現後面一串文字無法放入後方的空間中，故在可斷行的地方換行希望能夠解決，結果還是沒辦法，就讓它超出去了。

利用word-wrap: break-word

我們可以在該容器加上word-wrap: break-word這段CSS來解決分行的問題。程式碼如下方：

*{
     word-wrap: break-word;
}

結果如下圖：

可以發現文字終於被放在容器中了，並且也真的做到了自動分行的效果，只是不像wbr可以控制其分行的位置而已。如果各位再仔細看一下的話，就會發現後方依然還留有空白處，也就是上圖的點部落的部和落之間以及Rosetta Code兩個字之間的換行依然還在，究竟可不可以把它們去除掉呢？

利用word-break: break-all

除了上述的方法外，我們也可以在該容器加上word-break: break-all這段CSS來解決分行的問題。程式碼如下方：

*{
     word-break: break-all;
}

結果如下圖：

跟上個方法一樣的，我們也可以把文字放在容器中了，並且也真的做到了自動分行的效果，而且原本後方會殘留的空白不見了，原因是這個方法是很暴力地在無法放下文字的地方直接換行，而這樣做的缺點就在圖中可以看到原本Stack Overflow的Overflow是一個字，但卻被直接從中間硬生生地給切斷了，不像上個方法還會先嘗試看看換行後該單字是否能夠放的下。

結論

上面兩個方法有好有壞，各位可以依據自己的看法來決定要用哪個方法。如果是英文文章要做這類的分行行為，用word-wrap: break-word會較妥當，不會一直導致一堆字詞被從中切開；而如果是放置很多長網址的話，那就用word-break: break-all會比較好，因為網址從中間切開也沒什麼關係，反倒是為了讓網址能放下去而進行的換行所殘留下來的空白比較討厭。在這裡就給大家這樣的建議，希望各位都能夠了解！

參考資料

1. Word wrapping/hyphenation using CSS. — Kenneth Auchenberg：http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
2. 你真的了解word-wrap和word-break的区别吗？ – 无双 – 博客园：http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html