DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> css控制文字自動換行的實現方法
css控制文字自動換行的實現方法
編輯：關於CSS     

自動換行問題,正常字符的換行是比較合理的,而連續的數字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現換行的方法

對於div,p等塊級元素

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

html

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

css

CSS Code復制內容到剪貼板
  1. #wrap{whitewhite-space:normal; width:200px; }   
1.（IE浏覽器）連續的英文字符和阿拉伯數字,使用word-wrap : break-word ;或者word-break:break-all;實現強制斷行

CSS Code復制內容到剪貼板
  1. #wrap{word-break:break-all; width:200px;}   
或者

CSS Code復制內容到剪貼板
  1. #wrap{word-wrap:break-word; width:200px;}   
  2.   
  3. abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111   

效果：可以實現換行

2.（Firefox浏覽器）連續的英文字符和阿拉伯數字的斷行,Firefox的所有版本的沒有解決這個問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動條

CSS Code復制內容到剪貼板
  1. #wrap  
  2.   
  3. {word-break:break-all; width:200px; overflow:auto;}   
  4.   
  5. abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111   

效果：容器正常，內容隱藏

對於table

1. (IE浏覽器)使用 table-layout:fixed;強制table的寬度,多余內容隱藏

XML/HTML Code復制內容到剪貼板
  1. <table style="table-layout:fixed" width="200">  
  2. <tr>  
  3. <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss   
  4. </td>  
  5. </tr>  
  6. </table>  

效果：隱藏多余內容

2.(IE浏覽器)使用 table-layout:fixed;強制table的寬度,內層td,th采用word-break : break-all;或者word-wrap : break-word ;換行

XML/HTML Code復制內容到剪貼板
  1. <table width="200" style="table-layout:fixed;">    
  2.     <tr>    
  3.         <td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890      
  4.         </td>    
  5.         <td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890   
  6.         </td>    
  7.     </tr>    
  8. </table>  

效果：可以換行

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;無法起作用

XML/HTML Code復制內容到剪貼板
  1. <table style="table-layout:fixed" width="200">  
  2. <tr>  
  3. <td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>  
  4. <td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>  
  5. </tr>  
  6. </table>  

效果：隱藏多於內容

5.(Firefox浏覽器) 在td,th中嵌套div,p等采用上面提到的對付Firefox的方法
運行代碼框
最後，這種現象出現的幾率很小，但是不能排除網友的惡搞。如果

有什麼問題請到在下面留言

下面是提到的例子的效果

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>字符換行   
  6.     
  7. </title>  
  8. <style type="text/css">  
  9. table,td,th,div { border:1px green solid;}   
  10. code { font-family:"Courier New", Courier, monospace;}   
  11.     
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h1><code>div</code></h1>  
  16. <h1><code>All white-space:normal;</code></h1>  
  17. <div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that    
  18. has its WIDTH attribute set to a value smaller than the unwrapped content of the cell,    
  19. even if the noWrap property is set to true. Therefore, the WIDTH attribute takes    
  20. precedence over the noWrap property in this scenario</div>  
  21.     
  22. <h1><code>IE  word-wrap : break-word ;</code></h1>  
  23. <div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>  
  24. <h1><code>IE  word-break:break-all;</code></h1>  
  25. <div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>  
  26.     
  27. <h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>  
  28. <div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijkl   
  29. mn111111111</div>  
  30. <h1><code>table</code></h1>  
  31. <h1><code>table-layout:fixed;</code></h1>  
  32. <table style="table-layout:fixed" width="200">  
  33. <tr>  
  34. <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>  
  35. </tr>  
  36. </table>  
  37. <h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>  
  38. <table width="200" style="table-layout:fixed;">  
  39. <tr>  
  40. <td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>  
  41. <td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>  
  42. </tr>  
  43. </table>  
  44. <h1><code>FF  table-layout:fixed; overflow:hidden;</code></h1>  
  45. <table style="table-layout:fixed" width="200">  
  46. <tr>  
  47. <td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>  
  48. <td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>  
  49. </tr>  
  50. </table>  
  51. </body>  
  52. </html>  

以上就是小編為大家帶來的css控制文字自動換行的實現方法全部內容了，希望大家多多支持~

關於CSS
CSS代碼縮寫技巧
   Web網站可用性的關鍵指標是速度，更確切地說，是頁面能以多快的速度出現在訪
兼容主流浏覽器的CSS透明代碼(必看篇)
透明往往能產生不錯的網頁視覺效果下面是兼容主流浏覽器的CSS透明代碼。CSS Code復制內容到剪貼
淺談CSS中的繼承性,特殊性,層疊性和重要性
1. 繼承性CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS設計網頁頭部的寫法 css漸變色彩 省略標記 嵌入字體 文本陰影全面了解 淺談css處理水平居中的問題 CSS中內聯元素與塊級元素 css怎樣使div層水平-垂直居中 淺談css margin重疊 CSS hacker使用小結(兼容IE6、7、8) 用CSS控制網頁總體風格 CSS3實現鼠標懸停顯示擴展內容 引用css樣式的書寫格式詳解
熱門推薦
捷足先登學用CSS：HTML結構化 Iframe高度自適應代碼 SPAN和DIV的區別 淺談CSS中的繼承性,特殊性,層疊性和重要性 CSS＋DIV制作網頁時易犯的錯誤總結 5個CSS書寫技巧 關於box-sizing的全面理解 CSS基礎教程:CSS的應用 css background-attachment屬性進階
大家都在看
Sql server 2005的XML最佳實施策略(4) JavaScript將Web頁面內容導出到Word及Excel的方法教程 利用ICallbackEventHandle實現類似AJAX的無刷新頁面 門戶網站改版之用戶體驗 使用jQuery調用XML實現無刷新即時聊天 ASP.NET2.0中無法顯示 XML 頁。 使用 XSL 樣式表無法查看 XML 輸入。 Bootstrap Table服務器分頁與在線編輯應用總結 ajaxFileUpload.js插件支持多文件上傳的方法教程
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved