word wrap和word break为啥设计成一个属性?

Question

 word-wrap:
The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

 word-break:
The word-break CSS property is used to specify whether to break lines within words.

上面是官方的定义
在实际使用上,我发现,这两个属性可以单独使用
word-wrap,可以切换两种状态,"不截断单词","另起一行后再截断单词"
word-break,可以切换两种状态,"不截断单词","不另起一行并截断单词"
如果两个混合用,好像是word-break更具优先权
这两个属性,完全可以合并的,用三个取值可以表示三种状态
为啥要分成两个呢

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

Word Wrap 和 Word Break 是 CSS3 中的两个不同的属性。它们分别用于控制文本在网页中如何显示，以及在什么情况下会自动换行。

1. Word Wrap：这个属性用来指定浏览器是否应该对超过容器宽度的字符串进行换行。如果设置为 wrap 或 normal（默认值），则不会换行；如果设置为 break-word，则会在字符串末尾换行，并且不会在单词之间换行。
2. Word Break：这个属性用来指定在遇到超出字符边界时，浏览器是否会将其拆分到新行。默认值为 break-all，意味着所有的字符都会被拆分为单个单词，即使它们之间的空格不足一个字节。如果更改为了 all-words，则只会拆分单个单词，而不会拆分空格。

将这两个属性组合在一起，可以得到以下几种情况：

• 使用 word-wrap: normal; word-break: break-word;：当字符串长度大于容器宽度时，整个字符串会被换行，同时不会在单词间换行。
• 使用 word-wrap: normal; word-break: all-words;：当字符串长度大于容器宽度时，整个字符串会被换行，同时每个单词都会作为一个独立的元素来处理，这意味着在单词间的空白部分可能会出现空格。
• 使用 word-wrap: break-word; word-break: all-words;：这种组合方式与第一种类似，但不同的是，当字符串长度大于容器宽度时，所有字符都将被拆分为单个单词，并且在单词间会有一个空格。

这两种组合方式都可以有效地控制文本的外观，但在某些情况下可能需要根据具体需求调整。例如，在某些布局设计中，你可能希望在特定位置保持文本的一致性，而不必担心换行问题。在这种情况下，可以考虑使用 word-wrap: break-word; word-break: all-words; 的组合，以确保在这些位置上的文本始终保持一致的格式。

总的来说，将这两个属性分开使用是为了更好地满足各种应用场景的需求，而不是因为它们本身的设计目的。