阅读模式:

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

阅读量:22  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:word-break: normal; // 此值为浏览器的默认属性:以单词为单位; keep-all 这个值由于兼容性差,很少用;word-wrap: normal; // 此值为浏览器的默认属性:以单词为单位;纯中文:自动换行,一个汉......

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

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

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: