Heim > Artikel > Web-Frontend > 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
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 lerntDas 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!