word-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 2015⁩.

* Some parts of this feature may have varying levels of support.

Die word-break- CSS Eigenschaft legt fest, ob Zeilenumbrüche dort erscheinen, wo der Text ansonsten über seinen Inhaltsbereich hinausfließen würde.

Probieren Sie es aus

word-break: normal;

word-break: break-all;

word-break: keep-all;

word-break: break-word;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Honorificabilitudinitatibus califragilisticexpialidocious
    Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
    グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
  </div>
</section>

#example-element {
  width: 80%;
  padding: 20px;
  text-align: start;
  border: solid 1px darkgray;
}

Syntax

css

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* experimental */
word-break: break-word; /* deprecated */

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

Die word-break Eigenschaft wird als ein einziges Schlüsselwort bestimmt, das aus der untenstehenden Werteliste gewählt wird.

Werte

normal: Verwenden Sie die Standardregel für Zeilenumbrüche.
break-all: Um Überlauf zu vermeiden, sollten Wortumbrüche zwischen zwei Zeichen eingefügt werden (außer bei chinesischem/japanischem/koreanischem Text).
keep-all: Wortumbrüche sollten nicht für chinesischen/japanischen/koreanischen (CJK) Text verwendet werden. Bei nicht-CJK Text entspricht das Verhalten dem von normal.
auto-phrase: Hat denselben Effekt wie word-break: normal, außer dass eine sprachspezifische Analyse durchgeführt wird, um Wortumbrüche zu verbessern, indem sie nicht in der Mitte natürlicher Phrasen gesetzt werden.
break-word: Hat denselben Effekt wie overflow-wrap: anywhere kombiniert mit word-break: normal, unabhängig vom tatsächlichen Wert der overflow-wrap Eigenschaft.

Hinweis: Im Gegensatz zu word-break: break-word und overflow-wrap: break-word (siehe overflow-wrap) wird word-break: break-all genau an der Stelle einen Umbruch erzeugen, an der der Text ansonsten seinen Container überlaufen würde (auch wenn das Setzen eines ganzen Wortes in eine eigene Zeile den Bedarf für einen Umbruch negieren würde).

Die Spezifikation listet auch einen zusätzlichen Wert manual, der derzeit in keinem Browser unterstützt wird. Wenn implementiert, wird manual denselben Effekt haben wie word-break: normal, außer dass in südostasiatischen Sprachen keine automatischen Umbrüche eingefügt werden. Dies ist notwendig, weil Benutzeragenten in solchen Sprachen häufig Umbrüche an suboptimalen Stellen platzieren. manual wird es ermöglichen, Zeilenumbrüche manuell an optimalen Stellen einzufügen.

Formale Definition

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

Formale Syntax

word-break = 
  normal       |
  break-all    |
  keep-all     |
  manual       |
  auto-phrase  |
  break-word

Beispiele

HTML

html

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: manual</code></p>
<p class="manual narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>5. <code>word-break: auto-phrase</code></p>
<p class="autoPhrase narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>6. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

CSS

css

.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.manual {
  word-break: manual;
}

.autoPhrase {
  word-break: auto-phrase;
}

.breakWord {
  word-break: break-word;
}

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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