在項目中發現很奇怪的事情，一個table中有一個td中顯示動態的文字，文字的個數不定，輸入一定量的中文時，沒有問題，遇到一行結束會自動換行，但是測試時，隨便輸入一些字符，尤其是一長串的字符，會使得table的td變得很長，使得table變形，當然在實際情況下是不會有這樣的問題，不會有特別長的字符串。出現的原因是，瀏覽器在解析的時候以為那一長串的字符是一個單詞，所以如果不告訴他怎么做的話，他會直接顯示它而不換行，所以為了避免出現這樣的問題，可以對table設置一個css屬性，{table-layout: fixed;}使得其布局鎖定，不會因為字符的長度而變形。同時，對于td里的字符串自動換行，可以使用

{

word-break: break-all;
word-wrap:break-word;

}

下面黏貼了一個博文的解釋：http://blog.163.com/lintingte@126/blog/static/48259543200912633430694/

大家都知道頁面中td要不換行，需加上nowrap。

而有些地方必須根據內容而自動換行，解決該問題的方法有以下兩種：

1.在table里增加樣式：table{table-layout: fixed;}

以下引用table-layout的說明

語法：

table-layout : auto | fixed

參數：

auto : 　默認的自動算法。布局將基于各單元格的內容。表格在每一單元格讀取計算之后才會顯示出來。速度很慢

fixed : 　固定布局的算法。在這算法中，水平布局是僅僅基于表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內容無關

說明：

設置或檢索表格的布局算法。

對應的腳本特性為tableLayout。請參閱我編寫的其他書目。

示例：

table { table-layout: auto; }

2.在td里增加樣式：td{word-break: break-all; word-wrap:break-word;}

以下引用word-break的說明

語法：

word-break : normal | break-all | keep-all

參數：

normal : 　依照亞洲語言和非亞洲語言的文本規則，允許在字內換行

break-all : 　該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本

keep-all : 　與所有非亞洲語言的normal相同。對于中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本

說明：

設置或檢索對象內文本的字內換行行為。尤其在出現多種語言時。

對于中文，應該使用break-all 。

對應的腳本特性為wordBreak。請參閱我編寫的其他書目。

示例：

div {word-break : break-all; }

轉載于:https://www.cnblogs.com/height/archive/2012/07/19/css.html

總結

以上是生活随笔為你收集整理的Table 自动换行问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。