Problematik
Gerade bei Firmen- und Produktnamen gibt es häufig genaue Darstellungsrichtlinien. Dazu gehört nicht selten die Vorgabe, dass innerhalb eines Namens, der aus zwei oder mehr Wörtern besteht, kein Zeilenumbruch erfolgen darf. In HTML gibt es die Möglichkeit geschützter Leerzeichen (  oder ). Doch erstens halten sich einige Browser nicht so strikt daran, bei solchen Zeichen nicht umzubrechen. Und zweitens kann sich eine Notation wie Vowiverweh AG Musterstadt auf primitive Suchmaschinen negativ auswirken. Gerade selbstgebastelte, firmeneigene Wortindex-Suchen versagen bei so etwas gerne, weil die Worterkennung diese Form von HTML-Markup nicht berücksichtigt. Als Alternative gibt es das proprietäre nobr-Element. Doch welcher ambitionierte Webautor möchte mit ungültigen HTML-Tags operieren? Bleibt CSS als Lösung.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> .nobreak { white-space: nowrap; } </style> </head> <body> <p>Am vergangenen Montag hat der Vorstand unseres geschätzten Mutterkonzerns <span class="nobreak">Vowiverweh AG Musterstadt</span> beschlossen, dass wir alle demnächst entlassen werden sollen.</p> </body> </html>
Erläuterung
Wir definieren in einem zentralen Style-Bereich (das kann natürlich auch in einer externen CSS-Datei geschehen) eine allgemeine Klasse. Im Beispiel nennen wir sie nobreak. Die Klasse lässt sich jedem HTML-Element zuweisen, das Fließtext enthält. Im HTML-Text des Beispiels wird die Klasse auf ein span-Element angewendet, welches den Namen umgibt, innerhalb dessen kein automatischer Zeilenumbruch erfolgen soll. Da das span-Element ansonsten keinerlei besondere Formatierung bewirkt, erscheint der so ausgezeichnete Text ohne Unterschied zum umgebenden Text, ist jedoch vom automatischen Zeilenumbruch ausgeschlossen.
