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

学习更多技能

请点击下方公众号

CSS换行 word-break word-wrap 的理解相关推荐

Word Break Word Break II
leetcode上面的两道动态规划题. 题目1 Word Break Given a string s and a dictionary of words dict, determine if s c ...
Leetcode word break I II 词句拆分I和II的java实现及解析
Leetcode word break I & II 词句拆分I和II的java实现及解析 word break i是leetcode 里面中等难度的题目而word break II 更是ha ...
C++word break断字(基于单词或字符串)(附完整源码)
C++word break断字的实现 C++word break断字的完整源码(定义,实现,main函数测试) C++word break断字的完整源码(定义,实现,main函数测试) #includ ...
leetcode 140. Word Break II | 140. 单词拆分 II（动态规划）
题目 https://leetcode.com/problems/word-break-ii/ 题解由 leetcode 139. Word Break | 139. 单词拆分(动态规划) 改造而来 ...
LeetCode——Word Break
LeetCode--Word Break Question Given a non-empty string s and a dictionary wordDict containing a list ...
【DFS + 记忆化递归】LeetCode 140. Word Break II
LeetCode 140. Word Break II Solution1:我的答案纯DFS,在第31个case时超时,还是记录一下.. class Solution { // DFS public ...
【记忆化递归+DP】LeetCode 139. Word Break
LeetCode 139. Word Break Solution1: 记忆化递归的典型套路题参考网址:https://zxi.mytechroad.com/blog/leetcode/leetco ...
PhpWord 如何输出换行符到 word？
PhpWord 如何输出换行符到 word? 不多说,直接上答案: <w:br /> 注意:不能使用函数 htmlspecialchars,否则换行符会原样输出. 博主所有文章已转自私人博 ...
LeetCode Word Break II
Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...
Word框选一整段文字如何防止框到换行符？word怎么在选择的时候不选择上换行符，word选中段尾不选回车符
Word框选一整段文字如何防止框到换行符?word怎么在选择的时候不选择上换行符,word选中段尾不选回车符如下图所示

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

CSS换行 word-break word-wrap 的理解相关推荐

最新文章

热门文章