word-warp与word-break区别

经常用到分行属性word-break与word-wrap，没有注意过二者区别，这里整理下

 

1 . word-break:break-all

例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了

2 . word-wrap:break-word

例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的

 

word-break属性：指定非CJK脚本的断行规则

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

 

word-wrap属性：允许长的内容可以自动换行

normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

 

 

 

 

.