在項(xiàng)目中發(fā)現(xiàn)很奇怪的事情，一個(gè)table中有一個(gè)td中顯示動(dòng)態(tài)的文字，文字的個(gè)數(shù)不定，輸入一定量的中文時(shí)，沒(méi)有問(wèn)題，遇到一行結(jié)束會(huì)自動(dòng)換行，但是測(cè)試時(shí)，隨便輸入一些字符，尤其是一長(zhǎng)串的字符，會(huì)使得table的td變得很長(zhǎng)，使得table變形，當(dāng)然在實(shí)際情況下是不會(huì)有這樣的問(wèn)題，不會(huì)有特別長(zhǎng)的字符串。出現(xiàn)的原因是，瀏覽器在解析的時(shí)候以為那一長(zhǎng)串的字符是一個(gè)單詞，所以如果不告訴他怎么做的話，他會(huì)直接顯示它而不換行，所以為了避免出現(xiàn)這樣的問(wèn)題，可以對(duì)table設(shè)置一個(gè)css屬性，{table-layout: fixed;}使得其布局鎖定，不會(huì)因?yàn)樽址拈L(zhǎng)度而變形。同時(shí)，對(duì)于td里的字符串自動(dòng)換行，可以使用

{

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

}

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

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

而有些地方必須根據(jù)內(nèi)容而自動(dòng)換行，解決該問(wèn)題的方法有以下兩種：

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

以下引用table-layout的說(shuō)明

語(yǔ)法：

table-layout : auto | fixed

參數(shù)：

auto : 　默認(rèn)的自動(dòng)算法。布局將基于各單元格的內(nèi)容。表格在每一單元格讀取計(jì)算之后才會(huì)顯示出來(lái)。速度很慢

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

說(shuō)明：

設(shè)置或檢索表格的布局算法。

對(duì)應(yīng)的腳本特性為tableLayout。請(qǐng)參閱我編寫的其他書(shū)目。

示例：

table { table-layout: auto; }

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

以下引用word-break的說(shuō)明

語(yǔ)法：

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

參數(shù)：

normal : 　依照亞洲語(yǔ)言和非亞洲語(yǔ)言的文本規(guī)則，允許在字內(nèi)換行

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

keep-all : 　與所有非亞洲語(yǔ)言的normal相同。對(duì)于中文，韓文，日文，不允許字?jǐn)嚅_(kāi)。適合包含少量亞洲文本的非亞洲文本

說(shuō)明：

設(shè)置或檢索對(duì)象內(nèi)文本的字內(nèi)換行行為。尤其在出現(xiàn)多種語(yǔ)言時(shí)。

對(duì)于中文，應(yīng)該使用break-all 。

對(duì)應(yīng)的腳本特性為wordBreak。請(qǐng)參閱我編寫的其他書(shū)目。

示例：

div {word-break : break-all; }

轉(zhuǎn)載于:https://www.cnblogs.com/height/archive/2012/07/19/css.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。