CSS 属性

CSS 中的 word-break 属性用于指定在单词超过元素的可用宽度时应如何断开或换行。它决定浏览器是否应该允许单词在任何时候断开，或者是否应该将它们保持在一起。

属性值

  • normal:使用默认换行规则。

  • break-all:应用分词符，以防止溢出。

  • keep-all:中文、日文、韩文不使用断词；对于其他语言，应该是正常的。

  • break-word:与任何地方相同，即在任何单词处应用断词。但该值已被弃用。

适用范围

所有 HTML 元素。

DOM 语法

object.style.wordBreak = "break-all";

示例

这里是一个示例:

<html>
<head>
<style>
   p {
      border: 2px solid green;
      width: 200px;
   }
   .normal {
      word-break: normal;
   }
   .all {
      word-break: break-all;
   }
   .keep {
      word-break: keep-all;
   }
   .wordbreak {
      word-break: break-word;
   }
</style>
</head>
<body>
   <h2>Word Break</h2>
      <p class="normal">normal: CSS 提供了属性 <b>word-break</b>，该属性对于确定如何在文本块中断开单词非常有用</p>
    <p class="all">break-all: CSS 提供了属性 <b>word-break</b>，该属性对于确定如何在文本块中断开单词非常有用</p>
    <p class="keep">keep-all: CSS 提供了属性 <b>word-break</b>，该属性对于确定如何在文本块中断开单词非常有用</p>
    <p class="wordbreak">break-word: CSS 提供了属性 <b>word-break</b>，该属性对于确定如何在文本块中断开单词非常有用</p>

</body>
</html>