今天在做一個用戶留言列表的時候,用到了表格。用戶名為英文字符時,就會把固定寬度的單元格撐開。之前也有遇到過。解決辦法:先用noWrap強行令文字不換行,再用style="table-layout: fixed;; Word-break: break-all;;border-collapse: collapse"強制表格不撐開,即達到效果。
需要注意的是:用了nowrap的單元格設置的寬度要用百分比,不然還是會撐開。我們可以給表頭的單元格設置寬度。火狐下還要在td裡面嵌套一個div。
附:nowrap:一般用在td中禁止自動換行
table-layout:auto | fixed
auto : 默認值。默認的自動算法。布局將基於各單元格的內容。表格在每一單元格內所有內容讀取計算之後才會顯示出來
fixed : 固定布局的算法。在這種算法中,表格和列的寬度取決於 col 對象的寬度總和,假如沒有指定,則會取決於第一行每個單元格的寬度。假如表格沒有指定寬度( width )屬性,則表格被呈遞的默認寬度為 100% 。
Word-break:break-all和
word-wrap:break-Word都是能使其容器如DIV、TD的內容自動換行。
Word-break : normal | break-all | keep-all
word-wrap : normal | break-Word
它們的區別就在於:
1,Word-break:break-all 例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長(congratulation等),它會把單詞截斷,變成該行末端為conra(congratulation的前端部分),下一行為tulation(conguatulation)的後端部分了。
2,word-wrap:break-Word 例子與上面一樣,但區別就是它會把congratulation整個單詞看成一個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉的。
border-collapse : separate | collapse
取值:
separate : 默認值。邊框獨立(標准Html)
collapse : 相鄰邊被合並