换行符

line-break CSS 属性用于在处理标点符号和符号时设置如何换行中文、日文或韩文 (CJK) 文本。

试试看

语法

css

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: revert-layer;
line-break: unset;

值

auto: 使用默认换行规则换行文本。
loose: 使用限制最少的换行规则换行文本。通常用于短行，例如报纸。
normal: 使用最常见的换行规则换行文本。
strict: 使用最严格的换行规则换行文本。
anywhere: 每个印刷字符单元周围都有一个软换行机会，包括任何标点符号字符或保留的空格周围，或单词中间，忽略任何禁止换行的规则，即使是由具有 GL、WJ 或 ZWJ 字符类别的字符引入的或由 word-break 属性强制执行的规则。不同的换行机会不得优先考虑。不应用连字符。

正式定义

初始值	`auto`
应用于	所有元素
继承	是
计算值	如指定
动画类型	离散

正式语法

line-break = 
  auto      |
  loose     |
  normal    |
  strict    |
  anywhere

示例

设置文本换行

查看文本是否在“々”、“ぁ”和“。”之前换行。

HTML

html

<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>

CSS

css

.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}

结果

规范

规范
CSS 文本模块级别 3 # line-break-property

浏览器兼容性

BCD 表格仅在浏览器中加载

CSS 和国际文本