Umbruch und Trennung von Text

Was ist überlaufender Text?

In CSS, wenn Sie eine unteilbare Zeichenfolge haben, wie z. B. ein sehr langes Wort, wird es standardmäßig in einer zu kleinen Containerbox in der Inline-Richtung überlaufen. Wir können dies im folgenden Beispiel sehen: Das lange Wort erstreckt sich über die Grenzen des Containers 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, da etwas anderes zu einem Datenverlust führen könnte. In CSS bedeutet Datenverlust, dass ein Teil Ihres Inhalts verschwindet. Daher ist der Anfangswert 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 verschwänden oder abgeschnitten würden, wie es der Fall wäre, wenn overflow auf hidden gesetzt wäre, könnten Sie es beim Vorschau Ihrer Website nicht bemerken. Unordentlicher Überlauf ist zumindest gut zu erkennen, und im schlimmsten Fall kann Ihr Besucher den Inhalt sehen und lesen, auch wenn er etwas seltsam aussieht.

Im nächsten Beispiel sehen Sie, 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;
}

Ermittlung der min-content Größe

Um die Mindestgröße der Box zu finden, die ihren Inhalt ohne Überläufe enthält, setzen Sie die Eigenschaft width oder inline-size 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 daher eine Möglichkeit für überlaufende Boxen. Wenn es möglich ist, dass die Box auf die für den Inhalt erforderliche Mindestgröße wächst, aber nicht größer wird, erhalten Sie mit diesem Schlüsselwort diese Größe.

Lange Wörter trennen

Wenn die Box eine feste Größe haben muss oder Sie sicherstellen möchten, dass lange Wörter nicht überlaufen können, dann kann die Eigenschaft overflow-wrap helfen. Diese Eigenschaft trennt ein Wort, 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 bricht das Wort an der Stelle, an der es überläuft. Sie wird einen Umbruch bewirken, selbst wenn das Platzieren des Wortes in einer neuen Zeile es ermöglichen würde, ohne Umbruch angezeigt zu werden.

Im nächsten Beispiel können Sie den Unterschied zwischen den beiden Eigenschaften an 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 erscheint, 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 direkt danach erfolgt.

Im folgenden Beispiel gibt es ein Kontrollkästchen und eine Beschriftung. Angenommen, Sie möchten, dass die Beschriftung umbricht, sollte sie zu lang für die Box sein. Sie möchten jedoch nicht, dass sie 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 Trennstrichen

Um Trennstriche hinzuzufügen, wenn Wörter getrennt werden, verwenden Sie die CSS-Eigenschaft hyphens. Bei Verwendung des Werts auto kann der Browser automatisch Wörter an geeigneten Trennstellen brechen, basierend auf den Regeln, die er auswählt. 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 ‐ 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 es 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 Eigenschaft hyphenate-character verwenden, um anstelle des standardmäßigen Trennzeichens am Zeilenende (vor dem Trennstellenumbruch) für die Sprache eine Zeichenfolge Ihrer Wahl zu verwenden. Der auto-Wert wählt den richtigen Wert, um einen Zeilenumbruch in der Mitte eines Wortes entsprechend den typografischen Konventionen der aktuellen Inhaltssprache zu markieren.

CSS bietet zusätzliche Trennsteuerung: Die Eigenschaft hyphenate-limit-chars kann verwendet werden, um die Mindestwortlänge festzulegen, die eine Trennung zulässt, sowie die Mindestanzahl von Zeichen vor und nach dem Trennzeichen.

Das <wbr> Element

Wenn Sie wissen, wo Sie eine lange Zeichenfolge trennen möchten, ist es auch möglich, das HTML-Element <wbr> einzufügen. Dies kann nützlich sein in Fällen wie der Anzeige einer langen URL auf einer Seite. Sie können dann die Eigenschaft hinzufügen, um die Zeichenfolge an sinnvollen Stellen zu unterbrechen, die es einfacher zu lesen machen.

Im untenstehenden Beispiel bricht der Text an der Stelle 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 <wbr> Element
• Die CSS word-break Eigenschaft
• Die CSS overflow-wrap Eigenschaft
• Die CSS white-space Eigenschaft
• Die CSS text-wrap Eigenschaft
• Die CSS hyphens Eigenschaft
• Die CSS hyphenate-character Eigenschaft
• Die CSS hyphenate-limit-chars Eigenschaft
• Overflow and Data Loss in CSS