在網頁設計中一些連續的英文字符或者數字經常會把瀏覽器撐大,將網頁的布局弄得非常不美觀,而 連續的漢字又是好的.在網上也很少有這方面的教程,今天為大家推薦的方法可以進行這方面的控制.代碼片段如下 .wrap { table-layout:fixed; word-break: break-all; ov
例如: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 。