Umbruch und Trennung von Text

Was ist überlaufender Text?

In CSS, wenn Sie eine nicht trennbare Zeichenkette wie ein sehr langes Wort haben, wird es standardmäßig jede zu kleine Containerumgebung in der Inline-Richtung überlaufen. Dies können wir im folgenden Beispiel sehen: das lange Wort erstreckt sich über die Grenze des enthaltenen Kästchens hinaus.

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

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

CSS zeigt den Überlauf auf diese Weise an, weil etwas anderes zu tun Datenverlust verursachen könnte. In CSS bedeutet Datenverlust, dass einige Inhalte verschwinden. Der anfängliche Wert von overflow ist visible, und wir können den überlaufenden Text sehen. Es ist im Allgemeinen besser, Überlauf sehen zu können, auch wenn er unordentlich ist. Wenn Dinge verschwinden oder beschnitten werden würden, wie es passiert, wenn overflow auf hidden gesetzt ist, könnten Sie es möglicherweise beim Vorschau Ihrer Seite nicht bemerken. Unordentlicher Überlauf ist zumindest erkennbar, und im schlimmsten Fall kann Ihr Besucher den Inhalt sehen und lesen, auch wenn er etwas seltsam aussieht.

Im folgenden Beispiel können Sie sehen, was passiert, wenn overflow auf hidden eingestellt ist.

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

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

Die min-content-Größe ermitteln

Um die Mindestgröße des Kastens zu finden, die seinen Inhalt ohne Überläufe enthält, setzen Sie die Eigenschaft width oder inline-size des Kastens 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 daher eine Möglichkeit für überlaufende Kästchen. Wenn es möglich ist, dem Kasten zu erlauben, auf die Mindestgröße zu wachsen, die für den Inhalt erforderlich ist, aber nicht größer, wird mit diesem Schlüsselwort diese Größe erreicht.

Lange Wörter brechen

Wenn der Kasten eine feste Größe haben muss oder Sie sicherstellen möchten, dass lange Wörter nicht überlaufen, kann die Eigenschaft overflow-wrap helfen. Diese Eigenschaft wird ein Wort brechen, sobald es zu lang ist, um auf einer Linie zu passen.

<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, die Sie ausprobieren können, ist word-break. Diese Eigenschaft wird das Wort an dem Punkt brechen, an dem es überläuft. Sie wird sogar einen Umbruch verursachen, wenn das Platzieren des Wortes auf einer neuen Linie es ermöglichen würde, ohne Trennung angezeigt zu werden.

Im folgenden Beispiel können Sie den Unterschied zwischen den beiden Eigenschaften am selben Textstring 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 ein großer Abstand erscheint, wenn gerade genug Platz für den String vorhanden ist. Oder, wo es ein anderes Element gibt, nach dem Sie nicht möchten, dass der Umbruch direkt danach erfolgt.

Im Beispiel unten gibt es ein Kontrollkästchen und ein Label. Angenommen, Sie möchten, dass sich das Label bricht, sollte es zu lang für den Kasten sein. Sie wollen jedoch nicht, dass es direkt nach dem Kontrollkästchen gebrochen wird.

<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 Trennstrichen

Um beim Brechen von Wörtern Trennstriche hinzuzufügen, verwenden Sie die CSS-Eigenschaft hyphens. Bei Verwendung des Werts auto ist der Browser frei, automatisch Wörter an geeigneten Trennstellen zu brechen, basierend auf welchen Regeln auch immer er wählt. Um etwas Kontrolle über den Prozess zu haben, verwenden Sie den Wert manual, dann fügen Sie ein festes (U+2010) oder ein weiches Trennzeichen (U+00AD) in die Zeichenkette ein. Ein festes Trennzeichen kann mit ‐ oder ‐ hinzugefügt werden, und ein weiches Trennzeichen kann mit den HTML-Zeichenkodierungen ­, ­, oder ­ hinzugefügt werden. Ein festes Trennzeichen wird immer brechen, auch wenn es nicht notwendig ist zu brechen. Ein weiches bricht nur, 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 Eigenschaft hyphenate-character verwenden, um das zu verwendende Zeichen Ihrer Wahl anstelle des Standard-Trennzeichens am Ende der Linie (vor dem Trennungsumbruch) für die Sprache anzugeben. Der Wert auto wählt den korrekten Wert aus, um einen Wortumbruch nach den typografischen Konventionen der aktuellen Inhaltssprache zu markieren.

CSS bietet zusätzlich Kontrolle über die Trennung: die Eigenschaft hyphenate-limit-chars kann verwendet werden, um die minimale Wortlänge festzulegen, die eine Trennung erlaubt, sowie die minimale Anzahl von Zeichen vor und nach dem Bindestrich.

Das <wbr>-Element

Wenn Sie wissen, wo Sie möchten, dass eine lange Zeichenkette gebrochen werden darf, können Sie auch das HTML-Element <wbr> verwenden. Das <wbr>-Element führt eine Umbruchmöglichkeit ein—wenn das Wort überläuft, wird es an dieser Position umbrochen. Dies ermöglicht es, sinnvolle Segmente in der Zeichenkette zu bewaren, wie z.B. lange URLs.

Im folgenden Beispiel kann der Browser den Text an der Stelle des <wbr> brechen.

<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
• Overflow und Datenverlust in CSS