Umbruch und Zeilenumbruch

Was ist überlaufender Text?

In CSS wird eine nicht trennbare Zeichenfolge, wie ein sehr langes Wort, standardmäßig über jeden Container hinauslaufen, der in der Inline-Richtung zu klein ist. Wir können dies im folgenden Beispiel sehen: das lange Wort erstreckt sich über die Grenze des enthaltenen Rahmens hinaus.

<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
}

CSS zeigt Überläufe auf diese Weise an, weil andere Methoden zu Datenverlust führen könnten. Datenverlust in CSS bedeutet, dass ein Teil Ihres Inhalts verschwindet. Daher ist der anfängliche Wert von overflow visible, und wir können den überlaufenden Text sehen. Es ist im Allgemeinen besser, den Überlauf zu sehen, auch wenn er unordentlich ist. Wenn Dinge verschwinden oder abgeschnitten werden, wie es bei overflow auf hidden der Fall wäre, könnten Sie dies beim Vorschau Ihrer Website übersehen. Ein unordentlicher Überlauf ist zumindest leicht zu erkennen, und im schlimmsten Fall kann Ihr Besucher den Inhalt sehen und lesen, auch wenn er etwas seltsam aussieht.

Im nächsten Beispiel können Sie sehen, was passiert, wenn overflow auf hidden gesetzt ist.

<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
  overflow: hidden;
}

Bestimmen der Min-Content-Größe

Um die minimale Boxgröße zu finden, die ihren Inhalt ohne Überläufe enthält, setzen Sie die width- oder inline-size-Eigenschaft der Box auf min-content.

<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: min-content;
}

Die Verwendung von min-content ist somit eine Möglichkeit für überlaufende Boxen. Wenn es möglich ist, die Box auf die minimale für den Inhalt erforderliche Größe wachsen zu lassen, aber nicht größer, wird Ihnen dieses Keyword diese Größe geben.

Lange Wörter trennen

Wenn die Box eine feste Größe haben muss oder Sie sicherstellen möchten, dass lange Wörter nicht überlaufen, kann die overflow-wrap-Eigenschaft helfen. Diese Eigenschaft bricht ein Wort, sobald es zu lang ist, um in einer Zeile zu bleiben.

<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
  overflow-wrap: break-word;
}

Eine alternative Eigenschaft zum Ausprobieren ist word-break. Diese Eigenschaft bricht das Wort an der Stelle, an der es überläuft. Sie wird einen Umbruch verursachen, selbst wenn das Platzieren des Wortes in einer neuen Zeile es erlauben würde, ohne Umbruch angezeigt zu werden.

Im nächsten Beispiel können Sie den Unterschied zwischen den beiden Eigenschaften bei derselben Zeichenfolge vergleichen.

<div class="box box1">A Very LongWordThatHasNoBreakingPossibilities</div>

<div class="box box2">A Very LongWordThatHasNoBreakingPossibilities</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 30ch;
  margin-block-end: 1em;
}
.box1 {
  word-break: break-all;
}

.box2 {
  overflow-wrap: break-word;
}

Dies könnte nützlich sein, wenn Sie verhindern möchten, dass eine große Lücke entsteht, wenn gerade genug Platz für die Zeichenfolge vorhanden ist. Oder wenn es ein anderes Element gibt, bei dem Sie nicht möchten, dass der Umbruch sofort danach erfolgt.

Im Beispiel unten gibt es ein Kontrollkästchen und ein Label. Angenommen, Sie möchten, dass das Label umbricht, wenn es zu lang für die Box ist. Sie möchten jedoch nicht, dass es direkt nach dem Kontrollkästchen umbricht.

<div class="field">
  <input id="one" type="checkbox" /><label for="one">
    LongWordThatHasNoBreakingPossibilities
  </label>
</div>

<div class="field field-br">
  <input id="two" type="checkbox" /><label for="two">
    LongWordThatHasNoBreakingPossibilities
  </label>
</div>

.field {
  inline-size: 150px;
  border: 1px solid #cccccc;
  margin-block-end: 1em;
  padding: 10px;
}

.field-br {
  word-break: break-all;
}

Hinzufügen von Bindestrichen

Um Bindestriche hinzuzufügen, wenn Wörter umbrochen werden, verwenden Sie die CSS-Eigenschaft hyphens. Mit einem Wert von auto kann der Browser Wörter automatisch an geeigneten Trennstellen gemäß seiner Regeln brechen. Um etwas Kontrolle über den Prozess zu haben, verwenden Sie den Wert manual und fügen Sie ein hartes (U+2010) oder weiches Trennzeichen (U+00AD) in die Zeichenfolge ein. Ein hartes Trennzeichen kann mit ‐ oder ‐ und ein weiches Trennzeichen mit den HTML-Zeichencodes ­, ­ oder ­ hinzugefügt werden. Ein hartes Trennzeichen wird immer umbrochen, selbst wenn es nicht notwendig ist. Ein weiches Trennzeichen wird nur dann gebrochen, wenn es notwendig ist.

<div class="box">
  Llanfair&shy;pwllgwyngyll&shy;gogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  inline-size: 150px;
  overflow-wrap: break-word;
  hyphens: manual;
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
}

Sie können auch die hyphenate-character-Eigenschaft verwenden, um eine Zeichenfolge Ihrer Wahl anstelle des Standardtrennzeichens für die Sprache am Ende der Zeile (vor dem Zeilenumbruchszeichen) zu verwenden. Der Wert auto wählt den richtigen Wert, um einen Zwischenwort-Zeilenumbruch gemäß den typografischen Konventionen der aktuellen Inhaltesprache zu markieren.

CSS bietet zusätzliche Kontrolle über Trennzeichen: Die hyphenate-limit-chars-Eigenschaft kann verwendet werden, um die Mindestwortlänge festzulegen, die eine Trennung ermöglicht, sowie die Mindestanzahl von Zeichen vor und nach dem Bindestrich.

Das <wbr>-Element

Wenn Sie wissen, wo eine lange Zeichenfolge umgebrochen werden soll, können Sie das HTML-Element <wbr> einfügen. Dies kann nützlich sein, um eine lange URL auf einer Seite anzuzeigen. Sie können dann die Eigenschaft hinzufügen, um die Zeichenfolge an sinnvollen Stellen zu brechen, die das Lesen erleichtern.

Im folgenden Beispiel bricht der Text an der Position des <wbr>.

<div class="box">
  Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch
</div>

.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
}

Siehe auch

• Das HTML-Element <wbr>
• Die CSS-Eigenschaft word-break
• Die CSS-Eigenschaft overflow-wrap
• Die CSS-Eigenschaft white-space
• Die CSS-Eigenschaft text-wrap
• Die CSS-Eigenschaft hyphens
• Die CSS-Eigenschaft hyphenate-character
• Die CSS-Eigenschaft hyphenate-limit-chars
• Überlauf und Datenverlust in CSS