欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Css节制笔墨自动换行的实现要领

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

自动换行题目,正常字符的换行是较量公道的,而持续的数字和英笔墨符经常将容器撑大,挺让人头疼,下面先容的是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节制笔墨自动换行的实现要领所有内容了,但愿各人多多支持杨雨小我私人博客~

本文地址:http://itbyc.com/web/css3/13178.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1