目前共有3篇帖子。
【CSS】【轉載】解決英文字母、數字過長或者文本撐開網頁
1樓 巨大八爪鱼 2013-3-24 13:37
在網頁設計中一些連續的英文字符或者數字經常會把瀏覽器撐大,將網頁的布局弄得非常不美觀,而 連續的漢字又是好的.在網上也很少有這方面的教程,今天為大家推薦的方法可以進行這方面的控制.代碼片段如下 .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 。
2樓 巨大八爪鱼 2013-3-24 13:38
word-break:break-all;
word-wrap:break-word;
white-space:normal;
overflow:auto;
3樓 巨大八爪鱼 2013-3-24 13:38

回復帖子

內容:
用戶名: 您目前是匿名發表
驗證碼:
 
 
©2010-2024 Arslanbar [手機版] [桌面版]
除非另有聲明,本站採用創用CC姓名標示-相同方式分享 3.0 Unported許可協議進行許可。