CSS word-break 属性-之路教程

语法

word-break: normal | break-all | keep-all | break-word | initial | inherit;

word-break 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The 文档的标题</title>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        font-family: Helvetica, san serif;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #8ebf42;
      }
      p {
        word-break: break-all;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #eee;
        width: 1em;
      }
    </style>
  </head>
  <body>
    <p>element</p>
  </body>
</html>

在以下示例中，单词在文本中断开。

具有“break-all”值的 word-break 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The 文档的标题</title>
    <style>
      body {
        font-size: 0.95em;
        line-height: 1.5;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
      .container {
        margin: 50px auto;
        max-width: 700px;
      }
      .text {
        padding: 20px;
        background-color: #666;
        color: white;
        text-align: justify;
      }
      .break {
        word-break: break-all;
      }
      strong {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <h2>Word-break 属性示例</h2>
    <div class="container">
      <h3>Text breaks inside words</h3>
      <p class="text break">
        经历过风雨，才懂得阳光的温暖。 生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

      </p>
    </div>
  </body>
</html>

CSS word-break 属性

word-break 属性指定应该在何处断行。

通常，只有在有空格或者连字符时才会在某些空格中出现换行符。
但是当 word-break 属性设置为 break-all 值时，浏览器将在任何时候断行。

此属性是 CSS3 属性之一。

初始值	normal
应用于	所有元素。
继承	可继承
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.WordBreak =“break-all”;

CSS word-break 属性值说明

值	描述
normal	使用行中断规则。这是此属性的默认值。
break-all	此值在文本溢出容器的确切位置处创建一个断裂。它会在任何角色中打破这个词，因此它将难以阅读。
keep-all	Word Breaks不应用于中文/日语/韩语（CJK）文本。非CJK文本行为与正常相同。
break-word	此值在文本溢出容器的确切位置处创建一个断裂。它会在任何角色中打破这个词，因此它将难以阅读。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:52 来源：oir作者：oir

←CSS will-change 属性

CSS word-spacing 属性→

语法

word-break 属性示例：

具有“break-all”值的 word-break 属性示例：

CSS word-break 属性值说明

目录