cssword-wrap和word-break属性
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
cssword-wrap和word-break属性
word-wrap：⽤来标明是否允许浏览器在单词内进⾏断句，这是为了防⽌当⼀个字符串太长⽽找不到它的⾃然断句点时产⽣溢出现象word-break：⽤来标明怎么样进⾏单词内的断句
word-wrap:normal 和word-break:normal 都是浏览器默认的处理⽅式，有区别的是word-wrap:break-word 、word-break:break-all、word-break: keep-all
word-wrap:break-word在长单词或 URL 地址内部进⾏换⾏。
word-break:break-all 允许在单词内换⾏，简单粗暴，在长短字符串的任何位置都会换⾏
word-break: keep-all只能在半⾓空格或连字符处换⾏。
<!DOCTYPE html>
<html>
<head>
<style>
p.test0 {width:11em; border:1px solid #000000;}
p.test1 {width:11em; border:1px solid #000000; word-wrap:break-word;}
p.test2 {width:11em; border:1px solid #000000; word-break: break-all;}
p.test3{width:11em; border:1px solid #000000; word-break:keep-all;}
</style>
</head>
<body>
<p class="test0">wordwrap:normal000, This is a veryveryveryveryveryveryveryveryveryvery long paragraph</p> <p class="test1">wordwrap:breakword, This is a veryveryveryveryveryveryveryveryveryvery long paragraph</p> <p class="test2">wordbreak:breakall, This is a veryveryveryveryveryveryveryveryveryvery long paragraph</p> <p class="test3">wordbreak:keepall0, This is a veryveryveryveryveryveryveryveryveryvery long paragraph</p>
<p><b>注释：</b>⽬前 Opera 不⽀持 word-break 属性。
</p>
</body>
</html>word-break:break-all太过于粗暴，⽤的会后要特别注意
我们在⽇常显⽰⼀段⽂字时，应该不常会有⼀个长单词就超过了容器范围的情况，⼤部分都是在某⼀⾏的最后可能会有⼀个长单词，对于这种情况，为了让他们左右对齐，可以使⽤text-align:justify，如下所⽰：。