word-break 属性是 CSS 中用于控制在何处断开单词换行的属性。它主要用于处理非拉丁文本或长单词，以防止它们溢出其容器。

语法如下：
word-break: normal | break-all | keep-all | break-word | inherit;

常见的取值包括：

  •  normal：默认值，使用默认的换行规则，通常是在空格或连字符处断开单词。

  •  break-all：允许在单词内部断行，即使这可能导致溢出容器。

  •  keep-all：禁止在非中文文本中的空格或连字符处断行，适用于 CJK（中文、日文和韩文）文本。

  •  break-word：在单词内部断行，但不允许溢出容器。

  •  inherit：继承父元素的 word-break 值。


下面是一个简单的例子，演示了如何使用 word-break：
.normal {
  word-break: normal; /* 使用默认的换行规则 */
}

.break-all {
  word-break: break-all; /* 允许在单词内部断行，可能导致溢出容器 */
}

.keep-all {
  word-break: keep-all; /* 在非中文文本中的空格或连字符处不断行 */
}

.break-word {
  word-break: break-word; /* 在单词内部断行，不允许溢出容器 */
}

在这个例子中，不同类的元素展示了不同的 word-break 属性取值效果，从而影响了单词的断行方式。


转载请注明出处：http://www.zyzy.cn/article/detail/4274/CSS