Zeilenumbruch des Span-Elements verhindern

242

Ich habe ein <span>Element, das ich ohne Zeilenumbruch anzeigen möchte. Wie kann ich das machen?

html css Zufälliges Blau
quelle
Wenn Sie sie unterdrücken möchten
Sie

Antworten:

407

Fügen Sie dies in Ihr CSS ein:

white-space:nowrap;

Weitere Informationen erhalten Sie hier: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

Die white-spaceEigenschaft gibt an, wie Leerzeichen im Element behandelt werden.

Werte

normal Dieser Wert weist Benutzeragenten an, Sequenzen von Leerzeichen zu reduzieren und Zeilen nach Bedarf zu unterbrechen, um Zeilenfelder zu füllen.

pre Dieser Wert verhindert, dass Benutzeragenten Leerzeichenfolgen reduzieren. Zeilen werden nur an Zeilenumbrüchen in der Quelle oder beim Auftreten von "\ A" in generierten Inhalten unterbrochen.

nowrap Dieser Wert reduziert Leerzeichen wie bei "normal", unterdrückt jedoch Zeilenumbrüche im Text.

pre-wrap Dieser Wert verhindert, dass Benutzeragenten Leerzeichenfolgen reduzieren. Zeilen werden an Zeilenumbrüchen in der Quelle, beim Auftreten von "\ A" im generierten Inhalt und bei Bedarf zum Ausfüllen von Zeilenfeldern unterbrochen.

pre-line Dieser Wert weist Benutzeragenten an, Sequenzen von Leerzeichen zu reduzieren. Zeilen werden an Zeilenumbrüchen in der Quelle, beim Auftreten von "\ A" im generierten Inhalt und bei Bedarf zum Ausfüllen von Zeilenfeldern unterbrochen.

inherit Nimmt denselben angegebenen Wert wie die Eigenschaft für das übergeordnete Element an.

Daan
quelle
3
Es ist auch schön, hier weitere Dokumentation hinzuzufügen: w3.org/wiki/CSS/Properties/white-space
Justus Romijn
21
Für den Fall, dass Sie viele Bereiche innerhalb von div haben und eine einzeilige Spanne, aber keine einzeilige Spanne erreichen möchten, müssen Sie der Anzeige auch Folgendes hinzufügen: Inline-Block;. Hoffe, es wird jemandem helfen.
Walv
16

Wenn Sie nur Zeilenumbrüche bei Leerzeichen vermeiden müssen, können Sie &nbsp;Entitäten zwischen Wörtern verwenden:

No&nbsp;line&nbsp;break

anstatt

<span style="white-space:nowrap">No line break</span>
Brent Washburne
quelle
0

white-space: nowrapist die richtige Lösung, verhindert jedoch einen Zeilenumbruch. Wenn Sie nur Zeilenumbrüche zwischen zwei Elementen vermeiden möchten, wird es etwas komplizierter:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Um Unterbrechungen zwischen den Bereichen zu vermeiden, aber Unterbrechungen zwischen "Einige" und "Text" zuzulassen, können Sie Folgendes tun:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Das ist gut genug für Firefox. In Chrome müssen Sie zusätzlich das Leerzeichen zwischen den Bereichen durch ein ersetzen &nbsp;. (Das Entfernen des Leerzeichens funktioniert nicht.)

wertlos
quelle