Home-theater-designers
Lange Texte können im Webdesign unkontrollierbar erscheinen. Aber sie können auch unvermeidlich sein und manchmal überqueren sie Grenzen. Dadurch kann ein loses Document Object Model (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 einbrechen. Hier zeigen wir Ihnen, wie Sie lange, ununterbrochene Texte mit CSS umbrechen.
So funktioniert CSS-Textumbruch
CSS verarbeitet gestreckte lange Wörter mit dem eingebauten Zeilenumbruch oder Überlauffolie Eigentum.
So entfernen Sie iOS 13 Beta ohne Computer
Wenn sie jedoch nicht gesteuert werden, verarbeiten Browser solche langen Texte standardmäßig. Sie werden keine langen Wörter umbrechen, bis sie die Anweisung dazu erhalten.
Verwandte: Was Sie über das DOM wissen müssen
Die beiden zuvor erwähnten Haupt-CSS-Eigenschaften funktionieren auf die gleiche Weise und Sie können sie austauschbar verwenden. Sie akzeptieren jedoch vier Werte oder Syntaxen:
- Bruchwort : Dies ist die eigentliche CSS-Syntax, die den Browser anweist, einen langen Text in eine neue Zeile umzubrechen.
- normal : Es bricht jedes Wort an den normalen Trennpunkten innerhalb eines DOMs. Es hat keine Auswirkung auf lange Saiten.
- Initial : Dies ist die Standardmethode des Browsers, um Zeichenfolgen zu verarbeiten. Wie normal Syntax, es bricht keine langen Wörter.
- Erben : Es weist das untergeordnete Element an, die Eigenschaft seines übergeordneten Elements zu erben. Aber bei langen Texten klappt es immer noch nicht, außer du bewirbst dich Bruchwort zum Elternelement.
So umbrechen Sie lange Wörter mit CSS-Wortumbruch
Das Umbrechen von Wörtern in eine neue Zeile mit CSS ist einfach und erfordert keine umständlichen CSS-Optimierungen, um zu funktionieren.
Zum Beispiel die lange h2 Text innerhalb des Textcontainers im Beispielbild unten überschreitet die Grenzlinie:
Mal sehen, wie wir es mit der in die nächste Zeile einbinden können Zeilenumbruch CSS-Eigenschaft:
HTML :
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
CSS :
.wrap-it{
word-wrap: break-word;
}
Nach dem Einwickeln des langen h2 Text im Beispielbild, hier ist die Ausgabe:
Das ist es! Sie wissen jetzt, wie Sie Wörter mit CSS in eine neue Zeile in Ihrem DOM umbrechen.
Uefi-Firmware-Einstellungen fehlen Windows 10
Zugehörig: So zielen Sie mit CSS-Selektoren auf einen Teil einer Webseite ab
Allerdings, wie bereits erwähnt, Zeilenumbruch und Überlauffolie funktionieren gleich und akzeptieren ähnliche Eigenschaften.
Benutzen Überlauffolie stattdessen einfach ersetzen Zeilenumbruch damit.
Es ist wichtig, Wörter auf einer Webseite zu umbrechen
Das Umbrechen von Texten verleiht Ihrer Webseite nicht nur mehr Ästhetik, sondern verdichtet das DOM. Selbst wenn Sie steuern, was in Ihren Inhaltsbereich geht, können Benutzer Links oder andere Wörter posten, die nicht in Ihren Textcontainer oder Ihr gesamtes DOM passen.
Daher ist das Anwenden eines Textumbruchs auf einen solchen Abschnitt erforderlich, um das DOM intakt zu halten.
So wechseln Sie das Standard-Google-KontoTeilen Teilen Tweet Email So verwenden Sie Medienabfragen in HTML und CSS, um responsive Websites zu erstellen
Möchten Sie, dass Ihre Website auf mobilen Geräten fantastisch aussieht? Es ist an der Zeit, die Verwendung von Medienabfragen in CSS zu erlernen.
Weiter lesen Verwandte Themen- Programmierung
- CSS
- Dokumentobjektmodell
Idowu hat eine Leidenschaft für alles, was smarte Technologien und Produktivität ist. In seiner Freizeit spielt er mit Programmieren und wechselt bei Langeweile aufs Schachbrett, aber er liebt es auch, ab und zu aus der Routine auszubrechen. Seine Leidenschaft, Menschen den Weg in die moderne Technik zu weisen, motiviert ihn, mehr zu schreiben.
Mehr von Idowu OmisolaAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren