关于换行 word-break word-wrap 的理解

  • 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 点;