Div字數太多，破壞原本版面設計 - overflow (Width = 100%) (IE : word-break firefox : overflow)

相信一定有很多人跟我一樣，對於這個問題感到很困擾。我們常常會用一個Table或是一個Div來排版，然而如果當內容太多時，或是使用者輸入了一長串沒有空格的英文字母時，就會造成版面被擠壓摟~~

這個問題往往大家都是用overflow的CSS屬性就可以解決了。
下面這裡有一些微軟官方資料可以參考看看：
http://msdn2.microsoft.com/en-us/library/ms534312.aspx
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/overflow.htm

但是問題如果可以這麼簡單就解決的話，我就不用另外說明了。
當我們的div有設定一個寬度(width)的話，而且該寬度是一個固定的像素，例如500px等等的，
這樣就好辦，毫無問題。(不管是在firefox上或是在IE上面，都可以正常運作。)

但是問題來了，當我們設定它的Width為100%時，Firefox上~~OK，正常執行，但是IE呢？真的只能用OOXX來形容摟~~

為了這個問題我尋找了一天一夜，找到了一個替代方案，感覺還不錯！
我將DIV的Style設定為下面這一個：

style='word-break:break-all; overflow:auto;'


word-break是指能夠在IE上跑，而overflow當寬度設定為100%時，可以在firefox上跑！
如此這兩個屬性搭配，將可以讓我們的版面，可以當寬度超過時，自動換行，不會擠壓到版面。
不過在IE上面就不會長ScrollBar就是了！

Try it.