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

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

Die word-break CSS Eigenschaft legt fest, ob Zeilenumbrüche eingefügt werden, wo der Text sonst das Inhaltsfeld überlaufen 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 einzelnes Schlüsselwort aus der nachstehenden Werteliste festgelegt.

Werte

normal

Verwenden Sie die standardmäßigen Zeilenumbruchregeln.

break-all

Um Überlauf zu verhindern, sollten Wörter an beliebiger Stelle zwischen zwei Zeichen (außer bei chinesischen/japanischen/koreanischen Texten) unterbrochen werden.

keep-all

Wortumbrüche sollten bei chinesischen/japanischen/koreanischen (CJK) Texten nicht verwendet werden. Bei nicht-CJK-Texten ist das Verhalten identisch mit normal.

auto-phrase

Hat die gleiche Wirkung 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 platziert werden.

break-word

Hat die gleiche Wirkung wie overflow-wrap: anywhere in Kombination mit word-break: normal, ungeachtet des tatsächlichen Wertes der overflow-wrap Eigenschaft.

Hinweis: Im Gegensatz zu word-break: break-word und overflow-wrap: break-word (siehe overflow-wrap) erzeugt word-break: break-all einen Umbruch an genau der Stelle, an der Text sonst sein Container überlaufen würde (selbst 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 die gleiche Wirkung wie word-break: normal haben, außer dass bei südostasiatischen Sprachen keine automatischen Umbrüche eingefügt werden. Dies ist notwendig, da Benutzeragenten in solchen Sprachen häufig Umbrüche an suboptimalen Stellen platzieren. manual ermöglicht es Ihnen, Zeilenumbrüche an optimalen Stellen 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

Siehe auch