这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。 那它们到底是什么呢？我在mozilla的官网上 ...

这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。 那它们到底是什么呢？我在mozilla的官网上 ...

你真的了解word-wrap和word-break的区别吗？ 这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致 ...

这个问题的开始于我对中文和英文之前区别的一个疏忽（中文是一个字就是一个单词，而英文字母要有一个空格才将他们分割为一个单词）； 我们看到有三段文字，本意是将他们划分为三个块，并列排列，结果是这样的： 文字部分没问题，可是英文字母的部分把盒子模型撑的不像样，原因其实很简单 ...

word-break属性：指定非CJK脚本的断行规则。 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all ...

，对，就是这样的。 1.首先，我们先来看浏览器默认情况下出现的bug: 结果： 浏览器默 ...

。 相关： word-break同word-wrap区别 ...

一、无效原因： 可能是元素中设置的white-space是norwrap，所以无法换行。 二、解决方法：将white-space的值设置成normal自动换行 参考链接：word-wrap与word-break的区别，以及无效情况 ...