8
Css换行 word-break word-wrap 的理解
source link: https://www.fly63.com/article/detial/11271
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
更新日期: 2022-03-18阅读量: 191标签: 属性分享
扫一扫分享
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 点；
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK