©
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
word-break：normal | keep-all | break-all
默认值：normal
适用于：所有元素
继承性：有
动画性：否
计算值：指定值
相关属性：<' word-wrap '>
normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
keep-all：与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
break-all：该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。
对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all属性值；
作为IE的私有属性之一，IE5.5率先实现了 <' word-break '> ，后期被w3c采纳成标准属性；
对应的脚本特性为wordBreak。
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0+ | 2.0-14.0 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
| 15.0+ | ||||||||
| keep-all | 6.0+ | 2.0-14.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0 |
| 15.0+ |
不支持：keep-all 作为参数值。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>word-break_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test p{width:100px;border:1px solid #000;background-color:#eee;}
.normal p{word-break:normal;}
.break-all p{word-break:break-all;}
.keep-all p{word-break:keep-all;}
</style>
</head>
<body>
<ul class="test">
<li class="normal">
<strong>normal：</strong>
<p>aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</p>
</li>
<li class="break-all">
<strong>break-word：</strong>
<p>aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</p>
</li>
<li class="keep-all">
<strong>keep-all：</strong>
<p>aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</p>
</li>
</ul>
</body>
</html>
点击 "运行实例" 按钮查看在线实例