line-break

Baseline 已广泛支持

此特性已经十分成熟,可在许多设备和浏览器版本上使用。自 2020 年 7 月以来,它已在各大浏览器中可用。

line-break CSS 属性设置在使用标点符号和符号时,如何断开中文、日文或韩文(CJK)文本的行。

试一试

line-break: auto;
line-break: anywhere;
line-break: normal;
line-break: loose;
<section id="default-example">
  <p id="example-element">
    この喫茶店は、いつでもコーヒーの香りを漂わせています。<br />彼女はこの喫茶店で働いて、着々と実力をつけていきました。<br />今では知る人ぞ知る、名人です。
  </p>
</section>
#example-element {
  font-family: "Yu Gothic", "YuGothic", "Meiryo", "MS ゴシック", sans-serif;
  border: 2px dashed #999999;
  text-align: left;
  width: 240px;
  font-size: 16px;
}

语法

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

CSS

css
.wrap-box {
  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 Text Module Level 3
# line-break-property

浏览器兼容性

另见