overflow-wrap 和 word-break 的不同

190 阅读1分钟

有这样一段文本,默认展示效果:

image.png

  • 如果设置 overflow-wrap,效果是这样的:
overflow-wrap: anywhere;

overflow-wrap: break-word;

image.png

可以看出,overflow-wrap: anywhere;overflow-wrap: break-word; 在当前行剩余空间不够显示这个单词时会先换行,在下一行显示单词,在不溢出的同时,尽量保证了单词显示的完整性。

  • 如果设置 word-break,效果是这样的:
word-break: break-all;

image.png

word-break: break-all; 则是先将当前行填满再换行,不管剩余空间够不够显示整个单词。

  • 关于 overflow-wrap 和 word-break

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

    • word-break 指定了怎样在单词内断行。

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

overflow-wrap 的 anywhere 和 break-word 有细微差别:

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

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

此外要注意 overflow-wrap: anywhere; 的浏览器兼容性,Chrome 80 才开始支持。

image.png

来源: overflow-wrap - MDN