css防止表格被內容撐破的方法

第一種情況是表格被英文單詞撐破了。

解決辦法是在表格的屬性裡設定style="word-wrap:break-word;"

但其實還是有問題。當往表格裡裝一長串的英文字母時，表格還是會被撐破。這就是第2種情況了
解決辦法是在表格風格屬性裡再加一個屬性。style="word-wrap:break-word;word-break:break-all;"

但還有一種情況。當往表格裡放一張被表格大得多的圖片時，表格照樣還是被撐破了。

解決辦法有2種，第一種。把表格的風格設定為：

 style="overflow-x:no; word-wrap:break-word; word-break:break-all;TABLE-LAYOUT: fixed;"

記得要為表格設定寬度大小，但TABLE-LAYOUT: fixed設定了的話，對於表格版面配置將會很困難，推薦使用第2種解決辦法。

第二種解決辦法是從圖片本身入手

給圖片的風格屬性設定為

 style="max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)"

後來我發現上述代碼改寫一下就可以做到既防止表格/層撐破又防止單詞斷裂了。 

代碼 

table { 
table-layout: fixed; 
word-wrap:break-word; 
} 
div { 
word-wrap:break-word; 
} 

補充

table {   
word-break:break-all;
word-wrap:break-word;
}
 
img {
    max-width: 500px;
    width:expression(this.width > 500 ? "500px" : this.width)
   }

補充:

文法：
word-break : normal | break-all | keep-all

參數：
normal : 　依照亞洲語言和非亞洲語言的文本規則，允許在字內換行
break-all : 　該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 　與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本

文法：
word-wrap : normal | break-word

參數：
normal : 　允許內容頂開指定的容器邊界
break-word : 　內容將在邊界內換行。如果需要，詞內換行（word-break）也行發生

說明：
設定或檢索噹噹前行超過指定容器的邊界時是否斷開轉行。

文法：
table-layout : auto | fixed

參數：
auto : 　預設的自動演算法。布局將基於各儲存格的內容。表格在每一儲存格讀取計算之後才會顯示出來。速度很慢
fixed : 　固定式配置的演算法。在這演算法中，水平布局是僅僅基於表格的寬度，表格邊框的寬度，儲存格間距，列的寬度，而和表格內容無關