欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

CSS实现div放英笔墨母或数字被动换行 CSS一行排不下主动打断换行

在div css组织中,遇到延续英文字母或连续数字在div、p、h2、h1等盒子里排成一排透露表现不会自动随盒子宽度限制而主动换行。这里CSS5为各人先容应用css样式简单实现DIV内放字母英文或数字积极换行。

固然中翰墨在DIV或任意盒子中均会被动换行不重要CSS花式实现,只有间断的字母或数字会涌现不自动换行问题,以是紧要CSS打点。

英文字母或数字在DIV不换行溢出DIV的问题效果截图
英笔墨母或数字在DIV不换行溢出DIV的问题成果截图

但一般很少泛起在一个盒子里一排排不完的连气儿不竭的字母或数字,虽然涌现即可运用下列CSS DIV教程来计划。

一、CSS企图

word-wrap:break-word
评释:应用break-word时,是将强逼换行。

兼容各版本IE涉猎器,兼容谷歌浏览器。

二、CSS踊跃换行实例代码与成果截图

1、残缺HTML+CSS代码


  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>CSS5 CSS英文积极换行 在线实例</title>
  6. <style>
  7. .CSS5{ border:1px solid #00F; height:120px; width:200px;word-wrap:break-word} 
  8. </style>
  9. </head>
  10. <body>
  11. <div class="CSS5">
  12. aabbfjdlkfldsjfldsjfldjfljdlafjldsjflkdjflkdsjfldfjdlj<br />
  13. 138787843748927493274392749327493 
  14. </div>
  15. </body>
  16. </html>

2、实例成就截图

DIV CSS英文字母自动换行 CSS数字自动换行效果截图 DIV CSS英文字母积极换行 CSS数字积极换行造诣截图

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s52726.shtml