关于前端学习的思考-word-wrap和word-break的区别

关于前端学习的思考-word-wrap和word-break的区别_第1张图片关于前端学习的思考-word-wrap和word-break的区别_第2张图片

如上图word-wrap里面的break-word就是按照单词来换行的,空格在前,连字符在后的时候,按照连字符进行换行,那么空格和连字符哪一个拥有优先级呢?

关于前端学习的思考-word-wrap和word-break的区别_第3张图片

关于前端学习的思考-word-wrap和word-break的区别_第4张图片

连字符在前,空格在后的时候,还是按照连字符进行换行。

综上,word-wrap有空格的时候按照空格换行,连字符和空格同时存在的时候,无论是连字符和空格位置如何,都是按照连字符换行。

关于前端学习的思考-word-wrap和word-break的区别_第5张图片

关于前端学习的思考-word-wrap和word-break的区别_第6张图片

word-break的break-all就是正常换行。

关于前端学习的思考-word-wrap和word-break的区别_第7张图片

关于前端学习的思考-word-wrap和word-break的区别_第8张图片

word-break的keep-all就是按照空格和连字符进行换行。

你可能感兴趣的:(学习)