CSS换行 word-break word-wrap 的理解

来源 | www.fly63.com

word-break: normal; // 此值为浏览器的默认属性：以单词为单位；keep-all 这个值由于兼容性差，很少用；
word-wrap: normal; // 此值为浏览器的默认属性：以单词为单位；

纯中文：自动换行，一个汉字看做一个单词；

纯英文或纯数字：看做一个单词，不换行；

遇到英文空格或者换行符：会换行；

遇到英文单词和英文空格：在空格处换行且不会断单词；

word-break: break-all; // 此值表示 单词也要换行，都要换行；

纯中文：自动换行，一个汉字看做一个单词；

纯英文或纯数字：直接把单词截断换行；

遇到英文空格或者换行符：会换行；

遇到英文单词和英文空格：在空格处换行截断单词；

word-wrap: break-word; // 此值表示 纯单词超过长度会截断换行，其他的单词不会；

纯中文：自动换行，一个汉字看做一个单词；

纯英文或纯数字：直接把单词截断换行；

遇到英文空格或者换行符：会换行；

遇到英文单词和英文空格：在空格处换行不截断单词；

换行范围：

word-break: break-all; > word-wrap: break-word; > word-break: normal; word-wrap: normal;

总结：

1：浏览器默认是以单词为单位进行换行的，单词不可拆分，挤不下会另起一行；一个汉字为一个单词；

2：word-break: break-all 此值表示 超出的时候都要换行，是单词要拆分；

3：word-wrap: break-word 此值表示 如果一个单词超出行长度，要截取换行，其他默认；

4：word-break: normal; word-wrap:normal 此值表示 浏览器的默认行为，也就是第 1 点；

学习更多技能

请点击下方公众号