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 September 2015.

Die word-break CSS Eigenschaft legt fest, ob Zeilenumbrüche dort erscheinen, wo der Text sonst seinen Inhaltsblock überlaufen würde.

Probieren Sie es aus

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 einzelnes Stichwort aus der untenstehenden Werteliste angegeben.

Werte

normal

Verwenden Sie die Standardregel für Zeilenumbrüche.

break-all

Um Überlauf zu verhindern, sollten Wortumbrüche zwischen zwei beliebigen Zeichen eingefügt werden (außer bei chinesischen/japanischen/koreanischen Texten).

keep-all

Wortumbrüche sollten nicht für chinesische/japanische/koreanische (CJK) Texte verwendet werden. Das Verhalten bei nicht-CJK-Texten ist dasselbe wie bei normal.

auto-phrase

Hat den gleichen 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 von natürlichen Phrasen platziert werden.

break-word

Hat den gleichen 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), erstellt word-break: break-all einen Umbruch genau an der Stelle, wo der Text sonst seinen Container überlaufen würde (auch wenn das Platzieren eines gesamten Wortes in einer eigenen Zeile den Bedarf für einen Umbruch aufheben würde).

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

Formale Definition

Anfangswertnormal
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

word-break = 
  normal      |
  keep-all    |
  break-all   |
  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

BCD tables only load in the browser

Siehe auch