Style wordBreak 属性
在任意两个字母之间断行:
<!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.wordBreak = "break-all"; } </script> </body> </html>
定义和用法
wordBreak 属性规定非 CJK 语言的换行规则。
提示:CJK 语言是指中文(Chinese)、日文(Japanese)和韩文(Korean)。
浏览器支持
所有主流浏览器都支持 wordBreak 属性。
语法
返回 wordBreak 属性:
object.style.wordBreak
设置 wordBreak 属性:
object.style.wordBreak = "normal|break-all|keep-all|initial|inherit"
属性值
值 | 描述 |
---|---|
normal | 默认值。使用浏览器默认的换行规则。 |
break-all | 允许在单词内任意两个字母间换行。 |
keep-all | 只能在半角空格或连字符处换行。 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
技术细节
默认值: | normal |
---|---|
返回值: | 字符串,表示元素的 word-break 属性。 |
CSS 版本 | CSS3 |
相关文章
CSS 参考手册:word-break 属性