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

瀏覽器相容性

另見