一个关于 overflow-wrap: break-word; 的面试题

password

URL

type

status

date

slug

summary

overflow-wrap

于是去 mdn 上看看这个属性文档, overflow-wrap 应用于行级元素，用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。

可选的配置项有3个：

normal

行只能在正常的单词断点（例如两个单词之间的空格）处换行。

anywhere

为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时，会考虑由单词换行引入的软换行机会。

break-word

与 anywhere 值相同，如果行中没有其他可接受的断点，则允许在任意点将通常不可断的单词换行，但在计算最小内容内在大小时不考虑断字引入的软换行机会。

看到后面两个配置项的时候，这块感觉翻译的有点问题，但是大概能理解什么意思。就是说， anywhere 和 break-word 都可以让单词在词中间被打断换行； anywhere 会在换行时考虑软换行，每个中文、每个英文字母、每个标点符号能断就断；而 break-word 不考虑软换行机会，不会出现符号在行首的情况。

所以，题目的这里改成 overflow-wrap: anywhere 可以解决溢出问题。

word-wrap 和 word-break

overflow-wrap 的前身是微软扩展的一个非标准、无前缀的属性 word-wrap ,且已经在大多数浏览器中以相同的名称实现。 word-break 相当于 overflow-wrap 的别称。

word-wrap

css 的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

normal

就是大家平常见得最多的正常的换行规则。 break-word

一行单词中实在没有其他靠谱的换行点的时候在单词内换行。

word-break

css 的 word-break 属性用来标明怎么样进行单词内的断句。

normal

使用默认的换行规则，即如果一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去。 break-all

允许单词断行，即如果一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器不会把这个单词挪到下一行去，而是在单词内换行。

备注1： 与 word-break: break-word 和 overflow-wrap: break-word（详见 overflow-wrap）对比，word-break: break-word 将在文本可能溢出其容器的确切位置创建一个断点。

备注2： 与 word-break 相比，overflow-wrap 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。

所以，题目的这里改成 word-break: break-word 或者 word-break: break-all 都可以解决溢出问题。

flex 的问题

那么问题又来了，明明设置了overflow-wrap: break-word; 为什么还是会溢出呢；上面的解决方法都是强行让单词按字母断开从而解决溢出的问题，而按照文档，设置了这个属性就应该换行了呀。

搜索一圈，找到了解决方法

默认情况下，如果没有设置最小宽度，则会假定项目内容的最小宽度为最大宽度，且 display: flex 的子元素宽度永远不会变小。这个题目里给 flex 布局下的右侧元素添加 min-width 也可解决问题。