CSS word-wrap 属性

CSS overflow-wrap 属性是用来说明当一个不能被分开的字符串太长而不能填充其容器时,为防止其溢出,浏览器是否允许这样的单词中断换行。


实例

允许长单词换行到下一行:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.test
  6. {
  7. width:11em;
  8. border:1px solid #000000;
  9. word-wrap:break-word;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
  15. </body>
  16. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
word-wrap4.05.53.53.110.5

定义和用法

word-wrap 属性允许长单词或 URL 地址换行到下一行。

word-break 相比,overflow-wrap 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。
注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
默认值:normal
继承性:yes
版本:CSS3
JavaScript 语法:object.style.wordWrap="break-word"

语法

  1. word-wrap: normal|break-word;
描述
normal只在允许的断字点换行(浏览器保持默认处理)。
break-word在长单词或 URL 地址内部进行换行。

分类导航