HTML <nobr>-Tag
Das <nobr>-Tag ist nicht standardisiert. Lerne den modernen CSS-Ersatz white-space: nowrap mit Beispielen.
Das <nobr>-Tag sollte verhindern, dass Text in mehrere Zeilen umbricht — er hielt den Inhalt in einer einzigen Zeile. Normalerweise bricht der Browser einen Text, der länger als sein Container ist, in die nächste Zeile um. <nobr> unterdrückte diesen automatischen Zeilenumbruch, sodass eine horizontale Scrollleiste erschien, wenn die Zeile zu lang war.
Verwende <nobr> niemals in neuem Code. Es war niemals Teil eines HTML-Standards — weder HTML 4, noch HTML5 und auch nicht die aktuelle WHATWG-HTML-Spezifikation. Es war stets eine nicht standardisierte Browser-Erweiterung. Browser rendern es möglicherweise noch aus Gründen der Rückwärtskompatibilität, können die Unterstützung jedoch jederzeit einstellen, und es wird nicht validiert. Steuere den Zeilenumbruch stattdessen mit der CSS-Eigenschaft white-space.
Diese Seite zeigt den korrekten, standardkonformen Weg, um Textumbrüche zu verhindern, und dokumentiert anschließend das veraltete <nobr>-Tag, damit du es in altem Markup erkennen und entfernen kannst.
Der moderne Ersatz: white-space: nowrap
Um Text in einer einzigen Zeile zu halten, setze die CSS-Eigenschaft white-space auf nowrap am Element. Dies ist der direkte, standardkonforme Ersatz für <nobr> und funktioniert in jedem modernen Browser.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.no-wrap {
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Example of white-space: nowrap</h1>
<p class="no-wrap">
It is an ordinary and very long text that is inconvenient to read, because it is written on one line and you have to scroll horizontally to read it.
</p>
</body>
</html>Wie white-space den Umbruch steuert
Die Eigenschaft white-space bestimmt, wie der Browser Leerzeichen und Zeilenumbrüche innerhalb eines Elements behandelt. Die wichtigsten Werte:
normal— der Standardwert. Leerzeichen-Folgen werden zu einem einzelnen Leerzeichen zusammengefasst, und Zeilen umbrechen bei Bedarf, um den Container zu füllen.nowrap— fasst Leerzeichen wienormalzusammen, aber der Text umbricht nie. Die Zeile läuft weiter, bis ein<br>erreicht wird. Dies ist der Ersatz für<nobr>.pre— Leerzeichen und Zeilenumbrüche werden genau so beibehalten, wie sie im Quellcode stehen. Text umbricht nicht (ähnlich dem<pre>-Element).pre-wrap— behält Leerzeichen und Quellcode-Zeilenumbrüche bei und umbricht Text, wenn er den Container überläuft.pre-line— behält Quellcode-Zeilenumbrüche bei, fasst aber andere Leerzeichen zusammen und umbricht bei Bedarf.
Horizontalen Überlauf vermeiden
Eine nicht umbrechende Zeile kann über den Rand ihres Containers hinausragen. Um die Seite ordentlich zu halten, gib dem Container mit der Eigenschaft overflow eine Scrollleiste, anstatt die Zeile auf den Rest der Seite überlaufen zu lassen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scroll-box {
white-space: nowrap;
overflow: auto; /* scrollbar appears only when needed */
width: 300px;
border: 1px solid #ccc;
padding: 8px;
}
</style>
</head>
<body>
<p class="scroll-box">
This long line stays on a single row, and the box scrolls horizontally instead of overflowing the page.
</p>
</body>
</html>Wann Text in einer Zeile bleiben soll — und wann nicht
white-space: nowrap ist die richtige Wahl, wenn ein Umbruch die Bedeutung oder das Layout von kurzem, atomarem Inhalt zerstören würde:
- Tabellenzellen, die einen Wert nicht über mehrere Zeilen aufteilen dürfen (Datumsangaben, Preise, Telefonnummern).
- Button- und Badge-Beschriftungen, damit eine kurze Beschriftung in einer Zeile bleibt.
- Navigationsmenü-Einträge, damit jeder Link zusammenbleibt.
- Telefonnummern, Codes oder Namen, die visuell zusammengehalten werden sollen.
Es ist das falsche Werkzeug für langen Fließtext. Absätze in eine einzige Zeile zu zwingen erzeugt horizontales Scrollen, das schwer zu lesen ist. Für langen Inhalt, der in den Container passen muss, tue das Gegenteil — erlaube den Umbruch:
overflow-wrap: break-worderlaubt dem Browser, ein sonst nicht trennbares langes Wort (wie eine URL) nur dann zu trennen, wenn es überlaufen würde.word-breaksteuert, wie Wörter getrennt werden, einschließlich der Trennung zwischen zwei beliebigen Zeichen für CJK-Schriften oder sehr enge Spalten.
Um einen optionalen Trennpunkt innerhalb einer langen Zeichenkette (z. B. einer URL) vorzuschlagen, ohne einen zu erzwingen, verwende das HTML-Element <wbr>.
Das veraltete <nobr>-Tag
Das <nobr>-Tag war ein Element-Paar: Der Inhalt stand zwischen dem öffnenden <nobr> und dem schließenden </nobr>-Tag. Es ist hier nur zur Referenz aufgeführt — schreibe es nicht in neuen Code.
Ein gewöhnlicher und sehr langer Text in einer Zeile — veraltetes <nobr>-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Non-standard. Use white-space: nowrap instead. -->
<nobr>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</nobr>
</body>
</html>Ergebnis
Da <nobr> nicht standardisiert ist, hat es keinen Sinn, es über die globalen Attribute id/class zu gestalten oder zu skripten — ersetze das Element durch ein standardisiertes (wie <span> oder <p>) mit white-space: nowrap, und wende deine Attribute dort an.