Style wordWrap 属性
允许长单词换行到下一行:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>蜜蜂教程(mifengjc.com)</title> <style> #myDIV { width: 150px; height: 100px; background-color: lightblue; border: 1px solid black; } </style> </head> <body> <p>点击“尝试一下”按钮。让 DIV 元素中的长单词换行到下一行:</p> <div id="myDIV">Thiscouldbeaninsainlylargeword</div> <button onclick="myFunction()">尝试一下</button> <script> function myFunction() { document.getElementById("myDIV").style.wordWrap = "break-word"; } </script> </body> </html>
定义和用法
wordWrap 属性允许长单词或 URL 地址换行到下一行。
浏览器支持
所有主流浏览器都支持 wordWrap 属性。
语法
返回 wordWrap 属性:
object.style.wordWrap
设置 wordWrap 属性:
object.style.wordWrap = "normal|break-word|initial|inherit"
属性值
值 | 描述 |
---|---|
normal | 只在允许的断字点换行(浏览器保持默认处理)。 |
break-word | 在长单词或 URL 地址内部进行换行。 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
技术细节
默认值: | normal |
---|---|
返回值: | 字符串,表示元素的 word-wrap 属性。 |
CSS 版本 | CSS3 |
相关文章
CSS 参考手册:word-wrap 属性