Table 自动换行问题
在項目中發現很奇怪的事情,一個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 自动换行问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [收藏]书籍推荐
- 下一篇: Day 1 二分搜索训练总结