在 div CSS 布局中, 遇到连续英文字母或连续数字在 div,p,h2,h1 等盒子里排成一排显示不会自动随盒子宽度限制而自动换行. 下面我们来看一下 CSS 设置单词数字自动换行的方法.
中文字在 DIV 或任意盒子中均会自动换行不需要 CSS 样式实现, 只有连续的字母或数字会出现不自动换行问题, 所以需要 CSS 解决.
CSS 可以通过 Word-wrap 属性来设置自动换行, Word-wrap 属性允许长单词或 URL 地址换行到下一行.
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <style>
- p.test { width:11em; border:1px solid #000000; /*Word-wrap:break-Word;*/
- }
- </style>
- </head>
- <body>
- <p class="test">
- This paragraph contains a very long Word: thisisaveryveryveryveryveryverylongword.
- The long Word will break and wrap to the next line. 111111111111111111111111111111111111111111111111111111111111111
- </p>
- </body>
- </HTML>
在不使用 Word-wrap 属性设置自动换行时:
使用 Word-wrap 属性设置自动换行:
属性值:
normal 只在允许的断字点换行 (浏览器保持默认处理).
break-Word 在长单词或 URL 地址内部进行换行.
来源: http://www.css88.com/qa/css3/12392.html