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 地址内部进行换行。

.

猜你喜欢

转载自570109268.iteye.com/blog/2410927
今日推荐