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

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  Entitäten zwischen Wörtern verwenden:

No&nbsp;line&nbsp;break

anstatt

<span style="white-space:nowrap">No line break</span>

— Brent Washburne
quelle

1

Mit Bootstrap 4 Klasse:

text-nowrap

Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

— Herr Perfektionist
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  . (Das Entfernen des Leerzeichens funktioniert nicht.)

— wertlos
quelle