So wickeln Sie Text in eine neue Zeile in CSS

Eskere Guru

Langtexte können während des Webdesigns unkontrollierbar erscheinen. Aber sie können auch unvermeidlich sein und manchmal überschreiten sie Grenzen. Dadurch kann ein loses Dokumentobjektmodell (DOM) mit einem unnötigen Überlauf erstellt werden, der nicht benutzerfreundlich ist.

Aber hier ist die gute Nachricht: Sie können mit so langen Texten umgehen, indem Sie sie mit CSS in eine neue Zeile einschließen. Hier zeigen wir Ihnen, wie Sie lange, ungebrochene Texte mit CSS umbrechen.

Funktionsweise von CSS Text Wrap

CSS verarbeitet gestreckte lange Wörter mithilfe der integrierten Eigenschaft "Zeilenumbruch " oder " Überlaufumbruch" .

Wenn sie jedoch nicht gesteuert werden, verarbeiten Browser standardmäßig so lange Texte. Sie werden keine langen Wörter einschließen, bis sie die Anweisung dazu erhalten.

Verwandte: Was Sie über das DOM wissen müssen

Die beiden zuvor erwähnten wichtigen CSS-Eigenschaften funktionieren auf dieselbe Weise und können austauschbar verwendet werden. Sie akzeptieren jedoch vier Werte oder Syntaxen:

  • break-word : Dies ist die eigentliche CSS-Syntax, die den Browser anweist, einen langen Text in eine neue Zeile zu setzen.
  • normal : Es bricht jedes Wort an den normalen Trennungspunkten innerhalb eines DOM. Es hat keine Auswirkung auf lange Saiten.
  • initial : Dies ist die Standardmethode des Browsers zum Umgang mit Zeichenfolgen. Wie bei der normalen Syntax werden keine langen Wörter unterbrochen.
  • erben : Es weist das untergeordnete Element an, die Eigenschaft seines übergeordneten Elements zu erben. Bei langen Texten funktioniert dies jedoch immer noch nicht, es sei denn, Sie wenden ein Unterbrechungswort auf das übergeordnete Element an.

So wickeln Sie lange Wörter mit CSS Word Wrap ein

Das Umschließen von Wörtern in eine neue Zeile mit CSS ist einfach und erfordert keine umständlichen CSS-Optimierungen.

Beispielsweise überschreitet der lange h2- Text im Textcontainer im folgenden Beispielbild die Grenzlinie:

So wickeln Sie Text in eine neue Zeile in CSS - Web page with div container having long h2

Mal sehen, wie wir es mit der CSS-Eigenschaft "Zeilenumbruch" in die nächste Zeile umbrechen können :

HTML :

 <div class="wrap-it">
 This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
 </div">

CSS :

 .wrap-it{
 word-wrap: break-word;
 }

Nach dem Umschließen des langen h2- Textes in das Beispielbild ist hier die Ausgabe:

So wickeln Sie Text in eine neue Zeile in CSS - Web page with div container having long h2 text wrapped onto a new line

Das ist es! Sie wissen jetzt, wie Sie mithilfe von CSS Wörter in eine neue Zeile in Ihrem DOM einfügen.

Verwandte Themen: So zielen Sie mit CSS-Selektoren auf einen Teil einer Webseite

Wie bereits erwähnt, funktionieren Zeilenumbruch und Überlaufumbruch auf dieselbe Weise und akzeptieren ähnliche Eigenschaften.

Um stattdessen Überlaufumbruch zu verwenden, ersetzen Sie einfach den Zeilenumbruch durch diesen.

Es ist wichtig, Wörter auf einer Webseite zu verpacken

Durch das Umschließen von Texten wird das DOM nicht nur Ihrer Webseite ästhetischer, sondern auch komprimiert. Selbst wenn Sie steuern, was in Ihren Inhaltsbereich aufgenommen wird, können Benutzer Links oder andere Wörter veröffentlichen, die nicht in Ihren Textcontainer oder Ihr gesamtes DOM passen.

Daher ist das Anwenden von Textumbruch auf einen solchen Abschnitt erforderlich, um das DOM intakt zu halten.