©
This document uses PHP Chinese website manual Release
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>
点击 "运行实例" 按钮查看在线实例