Umbruch und Trennung von Text

In CSS, wenn Sie eine nicht trennbare Zeichenfolge wie ein sehr langes Wort haben, wird es standardmäßig in der Inline-Richtung jeden Container überfluten, der zu klein dafür ist. Wir können dies im folgenden Beispiel sehen: Das lange Wort überschreitet die Begrenzung des Kastens, in dem es enthalten ist.

<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 eine alternative Behandlung zu Datenverlust führen könnte. In CSS bedeutet Datenverlust, dass ein Teil Ihres Inhalts verschwindet. Der Anfangswert von overflow ist visible, und wir können den überlaufenden Text sehen. Es ist generell besser, den Überlauf sehen zu können, auch wenn es unordentlich ist. Wenn Dinge verschwinden oder beschnitten werden würden, wie es der Fall wäre, wenn overflow auf hidden gesetzt wäre, könnten Sie dies beim Vorschau Ihrer Seite übersehen. Unordentlicher Überlauf ist zumindest leicht zu erkennen, und im schlimmsten Fall kann Ihr Besucher den Inhalt sehen und lesen, selbst wenn es 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;
}

Um die minimale Größe eines Kastens zu finden, der seinen Inhalt ohne Überlauf enthält, setzen Sie die width oder inline-size Eigenschaft 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ästen. Wenn es möglich ist, dem Kasten zu erlauben, auf die minimale Größe zu wachsen, die für den Inhalt erforderlich ist, aber nicht größer, gibt Ihnen dieses Schlüsselwort diese Größe.

Wenn der Kasten eine feste Größe haben muss, oder Sie sicherstellen möchten, dass lange Wörter nicht überlaufen können, kann die overflow-wrap Eigenschaft helfen. Diese Eigenschaft wird ein Wort brechen, sobald es zu lang ist, um alleine in eine Zeile 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. Es wird einen Umbruch erzwingen, selbst wenn das Platzieren des Wortes in eine neue Zeile es erlauben würde, ohne Umbruch angezeigt zu werden.

Im nächsten Beispiel können Sie den Unterschied zwischen den beiden Eigenschaften an derselben Textzeichenfolge 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 entsteht, wenn gerade genug Platz für die Zeichenfolge vorhanden ist. Oder wenn es ein anderes Element gibt, nach dem Sie nicht wollen, dass der Umbruch sofort erfolgt.

Im untenstehenden Beispiel gibt es ein Kontrollkästchen und ein Label. Angenommen, Sie möchten, dass das Label umbricht, sollte es zu lang für den Kasten sein. 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 #ccc;
  margin-block-end: 1em;
  padding: 10px;
}

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

Um Bindestriche hinzuzufügen, wenn Wörter gebrochen werden, verwenden Sie die CSS-hyphens-Eigenschaft. Mit einem Wert von auto kann der Browser automatisch Wörter an geeigneten Trennstellen brechen, indem er den von ihm gewählten Regeln folgt. Um ein gewisses Maß an Kontrolle über den Prozess zu haben, verwenden Sie den Wert manual und fügen dann ein hartes (U+2010) oder weiches Trennzeichen (U+00AD) in die Zeichenfolge ein. Ein hartes Trennzeichen kann mit ‐ oder ‐ hinzugefügt werden, und ein weiches Trennzeichen kann mit den HTML-Zeichenkodierungen ­, ­ oder ­ hinzugefügt werden. Ein hartes Trennzeichen wird immer brechen, selbst wenn es nicht notwendig ist. Ein weiches Trennzeichen bricht nur, wenn ein Bruch erforderlich 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 das Zeichen Ihrer Wahl anstelle des Standard-Trennzeichens am Ende der Zeile (vor dem Trennumbruch) für die Sprache zu verwenden. Der auto-Wert wählt den richtigen Wert, um einen Wortmittenumbruch entsprechend den typografischen Konventionen der aktuellen Inhaltssprache zu markieren.

CSS bietet zusätzliche Trennkontrolle: Mit der hyphenate-limit-chars Eigenschaft kann die Mindestwortlänge, die Trennung erlaubt, sowie die Mindestanzahl von Zeichen vor und nach dem Bindestrich festgelegt werden.

Wenn Sie wissen, wo Sie möchten, dass eine lange Zeichenfolge umgebrochen werden soll, können Sie das HTML-Element <wbr> einsetzen. Dies kann in Fällen nützlich sein, wie das Anzeigen einer langen URL auf einer Seite. Sie können dann die Eigenschaft hinzufügen, um die Zeichenfolge an sinnvollen Stellen umzubrechen, die das Lesen erleichtern.

Im untenstehenden 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;
}

• 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