word-break

Die word-break CSS Eigenschaft wird verwendet, um anzugeben, ob zwischen Wörtern Zeilenumbrüche sein können.

Initialwertnormal
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Syntax

/* Schlüsselwortwerte */
word-break: normal;
word-break: break-all;
word-break: keep-all;

/* Globale Werte */
word-break: inherit;
word-break: initial;
word-break: unset;

Werte

normal
Die Standardregeln für Zeilenumbrüche werden verwendet.
break-all
Zeilenumbrüche können bei Text, der nicht in CJK (chinesisch/japanisch/koreanisch) geschrieben ist, nach irgendeinem Zeichen eingefügt werden.
keep-all
Erlaubt keine Zeilenumbrüche in CJK-Text.  Das Verhalten bei Nicht-CJK-Text ist das gleiche wie bei normal.

Formale Syntax

normal | break-all | keep-all | break-word

Beispiele

HTML-Inhalt

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow"> Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow"> Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keep narrow"> Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

CSS-Inhalt

.narrow {
    padding: 5px;
    border: 1px solid;
    width: 8em;
}

.normal {
    word-break: normal;
}

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

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

Spezifikationen

Spezifikation Status Kommentar
CSS Text Module Level 3
Die Definition von 'word-break' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Definition

Browserkompatibilität

BCD tables only load in the browser

Siehe auch