- A+
所属分类:Web前端
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 点;