CSS word-break 属性 详解
css3基础 2022-07-14 17:34:53小码哥的IT人生shichen
CSS word-break 属性
定义和用法
word-break 属性规定自动换行的处理方法。
提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。
实例
在恰当的断字点进行换行：
p.test {word-break:hyphenate;}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:11em;
border:1px solid #000000;
word-break:hyphenate;
}
p.test2
{
width:11em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
word-break: normal|break-all|keep-all;
属性值
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
技术细节
| 默认值： | normal |
|---|---|
| 继承性： | yes |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.wordBreak="keep-all" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
