溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中怎么控制文字自動(dòng)換行

發(fā)布時(shí)間：2021-08-09 16:15:25 來源：億速云 閱讀：158 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)css中怎么控制文字自動(dòng)換行，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

對(duì)于div,p等塊級(jí)元素

正常文字的換行(亞洲文字和非亞洲文字)元素?fù)碛心J(rèn)的white-space:normal,當(dāng)定義的寬度之后自動(dòng)換行

html

正常文字的換行(亞洲文字和非亞洲文字)元素?fù)碛心J(rèn)的white-space:normal,當(dāng)定義

css

CSS Code復(fù)制內(nèi)容到剪貼板

  1. #wrap{whitewhite-space:normal; width:200px; }   

1.（IE瀏覽器）連續(xù)的英文字符和阿拉伯?dāng)?shù)字,使用word-wrap : break-word ;或者word-break:break-all;實(shí)現(xiàn)強(qiáng)制斷行

CSS Code復(fù)制內(nèi)容到剪貼板

  1. #wrap{word-break:break-all; width:200px;}   

或者

CSS Code復(fù)制內(nèi)容到剪貼板

  1. #wrap{word-wrap:break-word; width:200px;}   

  2.   

  3. abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111   

效果：可以實(shí)現(xiàn)換行

2.（Firefox瀏覽器）連續(xù)的英文字符和阿拉伯?dāng)?shù)字的斷行,Firefox的所有版本的沒有解決這個(gè)問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動(dòng)條

CSS Code復(fù)制內(nèi)容到剪貼板

  1. #wrap  

  2.   

  3. {word-break:break-all; width:200px; overflow:auto;}   

  4.   

  5. abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111   

效果：容器正常，內(nèi)容隱藏

對(duì)于table

1. (IE瀏覽器)使用 table-layout:fixed;強(qiáng)制table的寬度,多余內(nèi)容隱藏

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <table style="table-layout:fixed" width="200">  

  2. <tr>  

  3. <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss   

  4. </td>  

  5. </tr>  

  6. </table>  

效果：隱藏多余內(nèi)容

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  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;強(qiáng)制table的寬度,內(nèi)層td,th采用word-break : break-all;或者word-wrap : break-word ;換行，使用overflow:hidden;隱藏超出內(nèi)容，這里overflow:auto;無法起作用

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  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>  

效果：隱藏多于內(nèi)容

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

有什么問題請(qǐng)到在下面留言

下面是提到的例子的效果

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  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. <h2><code>div</code></h2>  

  16. <h2><code>All white-space:normal;</code></h2>  

  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. <h2><code>IE  word-wrap : break-word ;</code></h2>  

  23. <div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>  

  24. <h2><code>IE  word-break:break-all;</code></h2>  

  25. <div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>  

  26.     

  27. <h2><code>Firefox/ word-break:break-all; overflow:auto;</code></h2>  

  28. <div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijkl   

  29. mn111111111</div>  

  30. <h2><code>table</code></h2>  

  31. <h2><code>table-layout:fixed;</code></h2>  

  32. <table style="table-layout:fixed" width="200">  

  33. <tr>  

  34. <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>  

  35. </tr>  

  36. </table>  

  37. <h2><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h2>  

  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. <h2><code>FF  table-layout:fixed; overflow:hidden;</code></h2>  

  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>  

看完上述內(nèi)容，你們對(duì)css中怎么控制文字自動(dòng)換行有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手