兼容多瀏覽器，兼容 div、p、td 的強制不換行及強制換行

 

兼容多瀏覽器，兼容 div、p、td 的強制不換行及強制換行 

2010-11-16 17:07:47|  分類： 程序設計ASP.NET |  標簽： |字號大中小訂閱

 

 

關於強制不換行、強制換行的話題在網上已經被討論了無數次，但我發現都不夠全面，沒有充分考慮各種瀏覽器、各種標簽等情況，以致不兼容，所以我再來說說。由於 div 和 p 在本文的討論中，效果相同，所以省略 p。
文中“沒有指定寬度的 td”是指：為 table 指定了寬度，但沒有給 td 指定寬度。
強制不換行
div,
td {     white-space:nowrap; }
這點在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均沒有問題。在 IE 的 td 中卻很復雜：
如果沒有為 td 指定寬度，則上述代碼仍然有效。 
如果為 td 指定了寬度，並且文字中無標點、無空格，上述代碼不再有效。可以加 word-break:keep-all; 解決，這是 CSS3 的內容，不過是 IE 最先提出的，所以 IE6 中也支持。 
如果為 td 指定了寬度，並且文字中有標點或空格。可以在文字與 td 之間套一層 div 加以解決。 綜合起來，為了簡單，使用：
div {     white-space:nowrap;     //一般我用這個實現不換行 }
只是為了兼容 IE 的 td 的不同情況，在文字與 td 之間套一層 div。
強制換行
強制換行是為了遇到一些超長的連續字符串（比如 aaaaaaaaaaaaa）時不撐大布局。
div, td {
    word-break:break-all; }
word-wrap:break-word; 兼容性不夠廣，所以我們使用的是 word-break:break-all;。上述代碼兼容於 IE、Chrome 的 div、指定寬度的 td、沒有指定寬度的 td，非常不錯，遺憾的是 Firefox 中不支持這個屬性，所以無效果，為了不讓其擠亂表格，可以加 overflow:hidden 來湊合着解決。
知其然知其所以然
上面介紹了三種屬性：
white-space : normal | nowrap 
word-wrap : normal | break-word 
word-break : normal | break-all | keep-all white-space
空白的處理方式，不止兩個屬性值，但在 IE6 中只支持這兩個，所以不介紹其他的。
normal 多個連續英文空格壓縮為一個英文空格顯示，在空白處可換行。 
nowrap 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。 word-wrap
內容超過容器邊界時是否斷開轉行。
normal 允許（只是允許，不是必須）內容頂開指定的容器邊界。 
break-word 內容將在邊界內換行。 word-break
換行的方式。
normal 英文在標點和空白處換行，中文在任何地方換行。 
break-all 英文和中文都在任何地方換行，比如從一個英文單詞的中間拆開換行。  keep-all 英文和中文都在標點和空白處換行。

關於強制不換行、強制換行的話題在網上已經被討論了無數次，但我發現都不夠全面，沒有充分考慮各種瀏覽器、各種標簽等情況，以致不兼容，所以我再來說說。由於 div 和 p 在本文的討論中，效果相同，所以省略 p。
文中“沒有指定寬度的 td”是指：為 table 指定了寬度，但沒有給 td 指定寬度。
強制不換行
div,
td {     white-space:nowrap; }
這點在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均沒有問題。在 IE 的 td 中卻很復雜：
如果沒有為 td 指定寬度，則上述代碼仍然有效。 
如果為 td 指定了寬度，並且文字中無標點、無空格，上述代碼不再有效。可以加 word-break:keep-all; 解決，這是 CSS3 的內容，不過是 IE 最先提出的，所以 IE6 中也支持。 
如果為 td 指定了寬度，並且文字中有標點或空格。可以在文字與 td 之間套一層 div 加以解決。 綜合起來，為了簡單，使用：
div {     white-space:nowrap; }
只是為了兼容 IE 的 td 的不同情況，在文字與 td 之間套一層 div。
強制換行
強制換行是為了遇到一些超長的連續字符串（比如 aaaaaaaaaaaaa）時不撐大布局。
div, td {
    word-break:break-all; }
word-wrap:break-word; 兼容性不夠廣，所以我們使用的是 word-break:break-all;。上述代碼兼容於 IE、Chrome 的 div、指定寬度的 td、沒有指定寬度的 td，非常不錯，遺憾的是 Firefox 中不支持這個屬性，所以無效果，為了不讓其擠亂表格，可以加 overflow:hidden 來湊合着解決。
知其然知其所以然
上面介紹了三種屬性：
white-space : normal | nowrap 
word-wrap : normal | break-word 
word-break : normal | break-all | keep-all white-space
空白的處理方式，不止兩個屬性值，但在 IE6 中只支持這兩個，所以不介紹其他的。
normal 多個連續英文空格壓縮為一個英文空格顯示，在空白處可換行。 
nowrap 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。 word-wrap
內容超過容器邊界時是否斷開轉行。
normal 允許（只是允許，不是必須）內容頂開指定的容器邊界。 
break-word 內容將在邊界內換行。 word-break
換行的方式。
normal 英文在標點和空白處換行，中文在任何地方換行。 
break-all 英文和中文都在任何地方換行，比如從一個英文單詞的中間拆開換行。  keep-all 英文和中文都在標點和空白處換行。

解決長串英文字母不能自動換行的問題和td中漢字自動換行 & CSS強制不換行
編程心得   2009-10-15 10:24   閱讀85   評論0   字號： 大大  中中  小小 例如：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能處理自動換行，將表格伸的很長很長，而漢字字符卻可以自動換行。

原因是： 英文字母之間如果沒有空格，系統認為是一個單詞，就不會自動換行。漢字就沒有這種情況。
解決辦法：
用表格把要顯示的內容裝起來。 在<table>標簽中加入“style='TABLE-LAYOUT: fixed'”,
在需要強制單詞換行的<td>標簽中加入“style='word-WRAP: break-word'”。 這樣就可以了。

      Div 中 ：  
div 實現長英文字母自動換行CSS IE瀏覽器
#wrap{white-space:normal; width:200px; } 或者
#wrap{word-break:break-all;width:200px;}
Firefox瀏覽器
#wrap{white-space:normal; width:200px; overflow:auto;} 或者
#wrap{word-break:break-all;width:200px; overflow:auto; }

2、不設置單元格寬度，但漢字會自動換行：
      解決方法： <table style='word-break:keep-all'>

CSS強制不換行
word-break屬性, keep-all；不換行。。     IE7和FF   , IE6 不行。。
white-space: nowrap;        IE6 及一下版本
順便寫下語法：
語法：
white-space : normal | pre | nowrap  取值：
normal   : 默認值。默認處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行 
pre   : 換行和其他空白字符都將受到保護。這個值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發生作用。結果等同於 normal 。參閱 pre 對象 
nowrap   : 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。參閱 noWrap 屬性 
說明：
設置或檢索對象內空格字符的處理方式。
空格字符，像換行，空格，TAB，在HTML文檔中默認的是被忽略的。當此屬性設置為 normal 或者 nowrap 時，你可以使用不換行空格的命名實體    來添加空格，用 br 元素來添加換行。此屬性對你使用文檔對象模型(DOM)操作的內容的影響與其對IE顯示內容的影響一樣。
此屬性作用於塊對象。 此屬性對於 currentStyle 對象而言是只讀的。對於其他對象而言是可讀寫的。
對應的腳本特性為 whiteSpace

 

CSS強制換行

 近來在項目中又遇上討厭的換行問題，所以不得不又google一下，總算完成了任務。對於CSS不熟悉的朋友可以學習以下的文字。以下內容來自網絡，歡迎相互交流。 自動換行問題,正常字符的換行是比較合理的,而連續的數字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現換行的方法對於div,p等塊級元素正常文字的換行(亞洲文字和非亞洲文字)元素擁有默認的white-space:normal,當定義的寬度之后自動換行html

正常文字的換行(亞洲文字和非亞洲文字)元素擁有默認的white-space:normal,當定義

css #wrap{white-space:normal; width:200px; } 1.（IE瀏覽器）連續的英文字符和阿拉伯數字,使用word-wrap : break-word ;或者word-break:break-all;實現強制斷行 #wrap{word-break:break-all; width:200px;} 或者 #wrap{word-wrap:break-word; width:200px;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：可以實現換行 2.（Firefox瀏覽器）連續的英文字符和阿拉伯數字的斷行,Firefox的所有版本的沒有解決這個問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動條 #wrap{word-break:break-all; width:200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：容器正常，內容隱藏 對於table 1. (IE瀏覽器)使用 table-layout:fixed;強制table的寬度,多余內容隱藏

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

效果：隱藏多余內容 2.(IE瀏覽器)使用 table-layout:fixed;強制table的寬度,內層td,th采用word-break : break-all;或者word-wrap : break-word ;換行

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果：可以換行 3. (IE瀏覽器)在td,th中嵌套div,p等采用上面提到的div,p的換行方法 4.(Firefox瀏覽器)使用 table-layout:fixed;強制table的寬度,內層td,th采用word- break : break-all;或者word-wrap : break-word ;換行，使用overflow:hidden;隱藏超出內容，這里overflow:auto;無法起作用

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890

效果：隱藏多於內容 5.(Firefox瀏覽器) 在td,th中嵌套div,p等采用上面提到的對付Firefox的方法