星期二, 8月 28, 2007

關於區塊、表格中的文字強迫折行

範例:\\10.0.1.11\Design共享資料\AboutCss\tablewrap.htm

在區塊或表格中,字母和數字超過寬度時,文字不會折行,而是在一行顯示下去,有沒有強制折行CSS呢?

對於區塊元素DIV、P
正常文字的換行(亞洲文字和非亞洲文字)元素,擁有預設的white-space:normal,當超過定義的寬度之後會自動換行。

IE瀏覽器
連續的英文字符和阿拉伯數字,使用word-wrap : break-word ;或者word-break:break-all;實現強制斷行

#wrap{word-break:break-all; width:200px;} 或者 #wrap{word-wrap:break-word; width:200px;}

Firefox瀏覽器
連續的英文字符和阿拉伯數字的斷行,Firefox並沒有解決這個問題,利用overflow:auto;的屬性讓超出邊界的文字隱藏或者給容器產生捲軸。



對於table
IE瀏覽器
使用 table-layout:fixed;強制table的寬度,多餘內容隱藏。

使用 table-layout:fixed;強制table的寬度,內層td,th採用word-break : break-all;或者word-wrap : break-word ;來強制換行。

Firefox瀏覽器
使用 table-layout:fixed;強制table的寬度,內層td,th採用word-break : break-all;或者word-wrap : break-word ;換行,使用overflow:hidden;隱藏超出內容,這裡overflow:auto;無法起作用。
張貼留言