line-break

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2020⁩.

Die line-break-Eigenschaft von CSS legt fest, wie Zeilen von chinesischem, japanischem oder koreanischem (CJK) Text unter Berücksichtigung von Satzzeichen und Symbolen gebrochen werden sollen.

Probieren Sie es aus

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", "ＭＳ ゴシック", sans-serif;
  border: 2px dashed #999999;
  text-align: left;
  width: 240px;
  font-size: 16px;
}

Syntax

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;

Werte

auto: Text brechen mit der Standardregel für Zeilenumbrüche.
loose: Text brechen mit der am wenigsten restriktiven Regel für Zeilenumbrüche. Typischerweise verwendet für kurze Zeilen, wie sie in Zeitungen vorkommen.
normal: Text brechen mit der häufigsten Regel für Zeilenumbrüche.
strict: Text brechen mit der strengsten Regel für Zeilenumbrüche.
anywhere: Es gibt eine weiche Umbruchsmöglichkeit um jede typografische Zeicheneinheit, einschließlich um jedes Satzzeichen oder erhaltene Leerzeichen herum oder inmitten von Wörtern, ungeachtet jeglicher Verbote gegen Zeilenumbrüche, sogar jene, die durch Zeichen mit der GL-, WJ- oder ZWJ-Zeichenklasse oder durch die word-break-Eigenschaft eingeführt werden. Die verschiedenen Umbruchsmöglichkeiten dürfen nicht priorisiert werden. Silbentrennung wird nicht angewendet.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

Einstellen des Textumbruchs

Sehen Sie, ob der Text vor "々", "ぁ" und "。" umbrochen wird.

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;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 3 # line-break-property

Browser-Kompatibilität

Siehe auch

CSS und internationaler Text auf W3C

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden