请解释 word-break 和 word-wrap 属性的作用，并说明它们之间的区别。

推荐答案

word-break 和 word-wrap 都是 CSS 中用来控制文本换行的属性，但它们作用方式和应用场景略有不同：

1. word-break:

   • 主要控制单词内部如何断行。
   • word-break: normal;：使用默认的断行规则，通常只在空格或连字符处换行。
   • word-break: break-all;：允许在任意字符之间断行，即使是在单词中间，强制断开单词。主要用于处理长串无空格的字符，比如 URL。
   • word-break: keep-all;：只能在半角空格或连字符处换行，禁止在单词内部换行，用于处理 CJK（中文、日文、韩文）文本。

2. word-wrap (现在推荐使用 overflow-wrap):

   • 主要控制单词是否允许断行来防止内容超出容器。
   • word-wrap: normal; (或 overflow-wrap: normal;)：只在正常的单词边界处换行（空格或连字符）。
   • word-wrap: break-word; (或 overflow-wrap: break-word;)：如果当前行没有可以换行的点，允许将长单词强制断开，换行显示，防止溢出。

区别:

• word-break 专注于单词内部的断行规则，更强调断开的位置。
• word-wrap (或 overflow-wrap) 专注于处理单词是否可以断行来防止溢出，更强调容器的适配。
• word-wrap 的 break-word 值功能上与 word-break 的 break-all 有重叠，但是 break-word 会尽量保持单词完整，只有在没有其他换行点的时候才会强制断开单词。

本题详细解读

word-break 详解

word-break 属性主要关注的是如何打破单词的默认边界，它有以下几个常用值：

• normal: 这是 word-break 的默认值。浏览器会使用默认的断行规则，通常在单词间的空格或连字符处换行，不允许单词内断行。

  .normal {
    word-break: normal; /* 默认值 */
  }

• break-all: 这个值非常强大，它允许在任意字符之间断行，即使是在单词的中间，强制打断单词。这在处理长 URL 或长串字符（没有空格的文本）时非常有用，可以避免内容溢出容器。

  .break-all {
      word-break: break-all;
  }

• keep-all: 对于中文、日文、韩文等 CJK 字符，默认情况下不允许在字符之间换行。keep-all 可以保持这种行为，只允许在半角空格或连字符处换行，阻止单词内部断行。

  .keep-all {
      word-break: keep-all;
  }

word-wrap (或 overflow-wrap) 详解

word-wrap 属性 (现在更推荐使用 overflow-wrap) 关注的是单词是否允许断行来防止溢出，其常用值如下：

• normal: 这是 overflow-wrap 的默认值，和 word-wrap 的默认值相同。只在正常的单词边界处换行（空格或连字符）。

  .normal-wrap {
    overflow-wrap: normal; /* 默认值 */
    /* 或者 word-wrap: normal; */
  }

• break-word: 当一行中没有其他可以换行的地方时， break-word 允许强制打断一个长单词，让其换行显示，从而防止内容溢出容器。注意它会尽量保留单词完整，仅在必要时才断开。

  .break-word-wrap {
    overflow-wrap: break-word;
    /* 或者 word-wrap: break-word; */
  }

总结区别

使用建议:

• 对于长串无空格的文本（如URL），通常使用 word-break: break-all; 来确保内容能正常显示。
• 当需要处理长单词，并防止它们超出容器时，使用 overflow-wrap: break-word; 是更好的选择。
• 对于 CJK 文本，可能需要配合 word-break: keep-all; 来保持正确的断行行为。
• 尽量使用 overflow-wrap 代替 word-wrap，因为它更符合标准，并且被所有现代浏览器支持。