Wörter nach Sonderzeichen wie Bindestrichen in CSS brechen
Hatten Sie jemals ein Problem mit langen Textsträngen, die die Breite ihres Containers überschreiten? Es wird noch umständlicher, wenn Sonderzeichen, wie Bindestriche, beteiligt sind. In diesem Beitrag werden wir eine Lösung erkunden, die es Ihnen ermöglicht, den Textumbruch nach Bindestrichen effektiv zu verwalten und so die Benutzererfahrung und Lesbarkeit zu verbessern.
Das Problem verstehen
Betrachten wir ein einfaches CSS-Szenario:
div {
width: 150px;
}
Und in Ihrem HTML haben Sie:
<div>
12333-2333-233-23339392-332332323
</div>
Hier überschreitet der Text innerhalb des <div> die angegebene Breite von 150 Pixeln. Dies kann zu einer unsachgemäßen Darstellung des Textes führen, was es für die Benutzer schwierig macht, den Inhalt zu lesen. Die Herausforderung besteht darin, die Zeichenfolge bei dem Bindestrich (-) in eine neue Zeile umschlagen zu lassen.
Die Lösung: Verwendung von weichen Bindestrichen
Um dies zu erreichen, können wir ein Sonderzeichen verwenden, das als weicher Bindestrich bekannt ist. Indem wir reguläre Bindestriche durch einen weichen Bindestrich ersetzen, weisen wir den Browser an, die Zeile an diesen Punkten nach Bedarf zu brechen.
So implementieren Sie den weichen Bindestrich
-
Regulären Bindestrich durch weichen Bindestrich ersetzen: Anstatt den Bindestrich (-) zu verwenden, ersetzen Sie ihn durch das HTML-Zeichen
­. Dadurch kann der Browser ihn als potenziellen Umbruchpunkt behandeln.Das modifizierte HTML sieht dann so aus:
<div> 12333­2333­233­23339392­332332323 </div> -
Ergebnisausgabe: Wenn Sie dies tun und der Text aufgrund der 150px Breitenbeschränkung umschlagen muss, wird er sauber am Bindestrich getrennt. Der umgebrochene Inhalt wird organisierter und visuell ansprechender aussehen.
Vollständiges Beispiel
Hier ist der vollständige Code-Schnipsel, der sowohl das CSS als auch das modifizierte HTML für eine bessere Klarheit kombiniert:
div {
width: 150px;
}
<div>
12333­2333­233­23339392­332332323
</div>
Fazit
Durch die Befolgung der oben genannten Schritte können Sie sicherstellen, dass Wörter am Bindestrich angemessen getrennt werden, was zu einer benutzerfreundlicheren Erfahrung führt. Die Verwendung von weichen Bindestrichen ist eine einfache, aber effektive Strategie, die Ihren Textinhalt viel leichter lesbar macht.
Zögern Sie nicht, diese Methode in Ihrem nächsten Webdesign-Projekt umzusetzen – Ihre Benutzer werden das verbesserte Textlayout zu schätzen wissen!