Montag, 20. Juli 2020
<br> mit CSS stylen
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Das HTML Element line break <br> produziert einen Zeilenumbruch in (Fließ-)Text. Es ist z. B. nützlich beim Notieren eines Gedichtes oder einer Adresse, wo die Aufteilung der Zeilen von Bedeutung ist. Es macht daher schon Sinn, wenn <br> nicht ohne Weiteres mit CSS gestylt werden kann.
Und dennoch, im Leben eines Webseitenbastlers gibt es Situationen, wo dies erforderlich ist.
Beispiel: Ein CSS erzeugt einen Zeilenumbruch, aber um die Lesbarkeit zu verbessern, ist ein größerer Zeilenabstand gewünscht.
Oder: Ein CSS erzeugt mehrere <br><br><br> – ja, das ist böse – aber das Design erfordert einen kleineren oder keinen Abstand.
Alle Versuche mit CSS height, line-height, margin oder padding scheitern.
Der CSS-Trick:
<style>
br {
content: "";
display: block;
/* jetzt evtl. Größenangaben, z. B. height */
height:2em;
}
</style>
Zum Ausprobieren: Codepen
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
3 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Ralf Grape schrieb am Mittwoch, 29.07.20 20:38 Uhr:
Vielen Dank; habe ich heute (Mittw., den 29.7.2020) gleich verwenden können.
Möchte jedoch noch den Unterschied zur Verwendung eines <p> zum Einstellen eines individuellen Abstandes zwischen Texten herausfinden. Zumindest scheint es logischer mit einem <b> als justierbarer Leerzeile zu sein.
Ralf Grape schrieb am Montag, 31.08.20 16:12 Uhr:
Leider hatte dieser Kniff (allerdings hatte ich die Klasse nicht 'br' genannt, sondern '.half') schließlich nicht in Chrome und Firefox auf einem (frisch upgedateten) Smartphone funktioniert.
Er war jedoch zuvor in den Browser-Simulationen für Smartphones auf meinem Desktop-System angenommen worden. Leider kann ich aus Zeitgründen jetzt keine weiteren Versuche machen, um innerhalb eines Elementes <p> eine variable Leerzeile einzubringen.
Vielleicht gibt es ja seitens des W3C mal etwas speziell Geeignetes zu einem solchen Zweck.
Manchmal muss man eben warten ...
Fritz schrieb am Montag, 31.08.20 16:20 Uhr:
@Ralf Grape
Das vorgestellte CSS stylt auch nicht irgendein Element mit irgendeiner Klasse ('.half'), sondern das HTML-Element br. Ohne Zuweisung irgendeiner Klasse. Und es sollte auf jedem Smartphone funktionieren, also sowohl iPhone als auch Android