摘要：理解和的区别从易于区分和理解的角度，我引用了无双在你真的了解和的区别吗一文中对两个属性作用的解释属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
white-space 、 word-wrap 和 word-break 是决定段落中的文本如何展示的3个css属性，属性说明请点击链接查看参考手册。
white-spacewhite-space属性定义了如何处理文本中的空白；具体到细节，主要决定决定了如何处理元素内文本中空白符、换行符、是否允许过长行折行;
其中，过长行是指那些单行内容宽度超出了容器宽度的行，以下列代码为例：
ABCDEFGHIJKOMN
/*css*/ p{width:4em;}
内容行ABCDEFGHIJKOMN渲染宽度为7em，超过所在容器的指定宽度，那么它属于过长行。
white-space属性各可能值的对比white-space默认值为normal，可选值包括pre、nowrap、pre-wrap、pre-line。
可选值各维度对比下表对比分析了white-space各值在处理空白符、换行符、折行与否时的不同策略。
| 值 | 概述 | 空白符 | 换行符 | 过长行是否折行 |
|---|---|---|---|---|
| normal | 合并连续的空白符、换行符为一个空白符；折行； | 连续的多个空白符合并成一个； | 换行符被当做空白符处理，一同合并； | 折行（说明1） |
| pre | 完全保留代码中格式；不折行； | 所有空白符保留； | 所有换行符保留； | 不折行（说明2） |
| nowrap | 合并连续的空白符、换行符为一个空白符；不折行； | 连续的多个空白符合并成一个； | 换行符被当做空白符处理，一同合并； | 不折行（说明2） |
| pre-wrap | 保留所有空白符、换行符；折行； | 所有空白符保留； | 所有换行符保留； | 折行（说明1） |
| pre-line | 空白符合并；换行符保留；折行； | 连续的多个空白符合并成一个； | 所有换行符保留； | 折行（说明1） |
说明1：折行（ CJK遇到容器边界自动换行；非CJK由word-wrap和word-break的值决定。）
说明2：不折行（行内容宽度超出容器宽度时的表现由overflow属性决定；word-wrap和word-break设置为任何值都不影响表现。）
1.如下方代码(图1)及相应效果图(图2)所示，段落中的换行效果可能来源于两种不同的原因。一种是段落中保留的换行符；另一种情况是过长行的折行效果。
前者在所属容器宽度改变时，仍然是多带带一行；后者在所属容器改变时可能合并到其余行中。
white-space值为normal、pre-wrap、pre-line时，过长行遇到容器边界时会触发折行现象。white-space决定了过长行是否发生折行，而 word-wrap和word-break用于决定如何进行折行。
理解word-wrap和word-break的区别从易于区分和理解的角度，我引用了“无双”在你真的了解word-wrap和word-break的区别吗？一文中对两个css属性作用的解释：
word-wrap
word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
word-break
word-break 属性用来标明怎么样进行单词内的断句。
关于word-wrap和word-break，我们主要关注word-wrap:break-word和word-break:break-all的区别:
word-wrap先尝试寻找空格、连接符等正常换行点，如果正常换行能满足不超出容器宽度的需求，正常换行；如果正常换行后仍然超出容器宽度，对非CJK长内容进行强制换行。
word-break:break:all直接强制在行末尾换行。
详细论述和验证建议参考张鑫旭大神的word-break:break-all和word-wrap:break-word的区别 和 无双的你真的了解word-wrap和word-break的区别吗？，两篇文章阐述都清晰明了，此处不班门弄斧；引出基本的概念和理解主要为了引出后续的组合引用效果表格。
word-wrap和word-break的组合引用效果word-wrap默认值normal，可选值break-word;
word-break默认值normal，可选值为break-all，keep-all。非CJK文本下，keep-all和normal的表现是一致的。
下表列出了word-wrap和word-break的组合使用效果。
| 组合 | 效果 |
|---|---|
| word-wrap:normal; word-break:normal; | 遵循默认规则折行； 如没有-和空白符，不折行(说明1)； |
| word-wrap:normal; word-break:break-all; | 内容遇到容器末尾强制执行换行； |
| word-wrap:break-word; word-break:normal; | 优先尝试正常折行； 正常折行后仍然过长的，强制在遇到容器末尾时换行； |
| word-wrap:break-word; word-break:break-all; | 内容遇到容器末尾强制执行换行(非末行均占满容器宽度)； （不优先尝试-和空白符等折行规则） |
说明1：超出容器宽度后的效果优overflow属性决定。
End文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116448.html
摘要：文本不会换行，文本会在在同一行上继续，直到遇到标签为止。保留空白符序列，但是正常地进行换行。合并空白符序列，但是保留换行符。规定应该从父元素继承属性的值。参考文章你真的了解和的区别吗和区别 不设置word-warp和word-break的时候，一行单词，超过了容器的宽度是，会将最后一个单词下移一行进行显示，如果下移的那个单词长度还是超过了容器宽度，则会溢出 word-wrap 设置wo...
摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。 CSS3文本 css字体类型属性 font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font...
摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。 选择器注意点 属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...
摘要：浏览器默认换行规则空格，回车，制表符，全部合成一个空格，文本自动换行只在半角空格，连字符处换行参考链接多行文本溢出省略显示实现单行多行文本超出显示省略号 浏览器默认换行规则：空格，回车，制表符，全部合成一个空格，文本自动换行（只在半角空格，连字符处换行） showImg(https://segmentfault.com/img/bVbrhiA?w=685&h=106); 参考链接：ht...
阅读 2524·2021-11-24 09:38
阅读 2579·2019-08-30 15:54
阅读 831·2019-08-30 15:52
阅读 1884·2019-08-30 15:44
阅读 2687·2019-08-30 13:48
阅读 746·2019-08-29 16:21
阅读 943·2019-08-29 14:03
阅读 2188·2019-08-28 18:15
