So verwenden Sie „white-space:nowrap' in CSS

white-space:nowrap wird im Allgemeinen in besonderen Situationen verwendet. Heute werden wir seine Syntaxstruktur und Standardparameter untersuchen, damit sich jeder mit white-space:nowrap

vertraut machen kann DIV CSS White-Space Norma Nowrap erzwingt die Anzeige des gesamten Textes in derselben Zeile, sodass der gesamte Textinhalt in einer Zeile ohne Umbruch angezeigt wird.

Lassen Sie den Text nicht automatisch umbrechen, egal wie stark die CSS-Breite eingestellt ist, der gesamte Text wird in einer Zeile angezeigt. Insbesondere für die Titelliste möchten wir nur einen Titelinhalt pro Zeile anzeigen, aber manchmal ist die Breite begrenzt und der Titeltext hat zu viel Breite (Breite) und ist begrenzt, was dazu führt, dass der Text angezeigt wird In diesem Fall können wir Leerzeichen verwenden. Der Stil ermöglicht die Anzeige in einer Zeile ohne Umbruch. Um den überschüssigen Textinhalt auszublenden, können wir natürlich einen CSS-Überlauf hinzufügen :versteckter Stil.

Leerzeichen-Syntax und Struktur

Leerzeichen-Syntax:

Leerzeichen: normales Nowrap

Leerzeichen-Parameter:

normal: Standardverarbeitungsmethode

nowrap: Erzwingt die Anzeige des gesamten Texts in derselben Zeile und wird erst am Ende des Textes oder beim Treffen mit dem br-Tag -Objekt umgebrochen. Es wird empfohlen, „white-space:nowrap“ zu verwenden, um keine Zeilenumbrüche zu erzwingen.

White-Space-Beschreibung:

White-Space legt den Textanzeigemodus innerhalb des Objekts fest oder ruft ihn ab. Normalerweise verwenden wir „white-space:nowrap“, um zu erzwingen, dass der Inhalt in einer Zeile angezeigt wird.

Normalerweise verwenden wir „white-space:nowrap“, um zu erzwingen, dass der Textinhalt nicht umgebrochen wird, und um den gesamten Textinhalt in einer Zeile anzuzeigen innerhalb des Objekts.

Leerraum-Übungsfall

Ich habe zwei Objektfelder eingerichtet, eine Einstellung zwingt die andere dazu, Textinhalte anzuzeigen. Die zweite Einstellung erzwingt die Anzeige von Peers, verwendet jedoch das HTML-Tag br, um den Effekt zu beobachten. Für den Leerraum-Anwendungseffekt habe ich die CSS-Breite auf 120 Pixel, die CSS-Höhe auf 60 Pixel und die CSS-Zeilenhöhe Zeilenhöhe auf 20 Pixel festgelegt.

1. CSS-Code

div{ width:120px; height:20px}

.div {white-space:nowrap}

2. HTML-Code-Snippet

Der Inhalt wird in eine Zeile Vollständige Anzeige erzwingen

Der Inhalt wird mit br umbrochen
Zeilenumbruchanzeige

Leerzeichen erzwingt keinen Zeilenumbruch und br erzwingt Zeilenumbruch CSS-Groß-/Kleinschreibung

Leerzeichen erzwingt keinen Zeilenumbruch und erzwingt br-Tag-Zeilenumbruch

Daily Us Damit der Textinhalt in einer Zeile angezeigt werden kann, kann er nicht umbrochen werden, auch wenn die Breite nicht ausreicht. Wenn wir jedoch auf den erzwungenen Zeilenumbruch in HTML stoßen Tag, unabhängig davon, ob Leerzeichen gesetzt sind oder nicht, wird es durch
erzwungen.

Verwandte Lektüre:

Wie man Div und CSS lernt

Wie man die CSS-Position verwendet

So legen Sie die minimale und maximale Breite von CSS fest

Das obige ist der detaillierte Inhalt vonSo verwenden Sie „white-space:nowrap' in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!