CSS erzwingt, dass Zeilenumbrüche nicht zulässig sind

CSS ist eine wesentliche Technologie in der Frontend-Entwicklung. Sie kann die Website verschönern und die Webseite besser lesbar machen. In CSS können wir den Stil von Elementen über einige Attribute wie Farbe, Schriftart, Position, Größe usw. steuern. Unter diesen ist auch das erzwungene Verbot von Zeilenumbrüchen ein sehr verbreitetes Stilattribut. In diesem Artikel wird die Verwendung und praktische Anwendung dieses Attributs ausführlich vorgestellt.

Das Attribut in CSS, das Zeilenumbrüche zwangsweise verbietet.

In CSS verwenden wir das White-Space-Attribut, um die Art und Weise zu steuern, wie Text innerhalb des Elements verarbeitet wird. Darunter lauten die Attributwerte wie folgt:

• normal: Text normal verarbeiten, mehrere aufeinanderfolgende Leerzeichen oder Zeilenumbrüche werden zu einem Leerzeichen zusammengeführt und Zeilen werden automatisch umbrochen.
• nowrap: Der Text wird nicht umgebrochen, das heißt, er wird nicht automatisch umgebrochen, wenn er auf ein Leerzeichen oder ein Zeilenumbruchzeichen trifft.
• pre: Leerzeichen und Zeilenumbrüche bleiben erhalten und der Text wird nicht automatisch umgebrochen. Zeilenumbrüche müssen manuell hinzugefügt werden.
• Vorumbruch: Behalten Sie Leerzeichen und Zeilenumbrüche bei, aber der Text wird automatisch umbrochen.
• Vorzeile: Der Text wird automatisch umgebrochen, aufeinanderfolgende Leerzeichen und Zeilenumbrüche werden jedoch ignoriert.

In praktischen Anwendungen können wir diese Attribute verwenden, um die Art und Weise zu steuern, wie Text angezeigt wird, um den gewünschten Effekt zu erzielen. Wenn wir beispielsweise erzwingen müssen, dass Zeilenumbrüche nicht zulässig sind, können wir das Attribut nowrap verwenden.

Nowrap-Anwendungsszenarien

In der täglichen Front-End-Entwicklung werden wir auf Situationen stoßen, in denen wir den Textumbruch einschränken müssen, wie zum Beispiel:

• Bei der Anzeige von Daten in einer Tabelle ist der Inhalt einiger Zellen zu lang und Wir möchten, dass der gesamte Inhalt in derselben Zeile angezeigt wird, anstatt ihn umzubrechen.
• Wenn in der Navigationsleiste jedes Menüelement aus einer einzelnen Textzeile besteht, können andere Stil- und Layoutprobleme effektiv vermieden werden und die Benutzeroberfläche wird übersichtlicher und prägnanter.
• Um bei der Verwendung von CSS für das Textlayout zu viel vertikalen Leerraum zu vermeiden, kann das Attribut „nowrap“ verwendet werden, um den gesamten Text in einer einzigen Zeile anzuzeigen und so das Layout kompakter zu gestalten.

In allen oben genannten Situationen kann das Attribut nowrap verwendet werden, um zu erzwingen, dass der Text keine Zeilenumbrüche zulässt.

Spezifische Verwendung von Nowrap

Wir können CSS-Stylesheets oder Inline-Stile verwenden, um den Textstil auf Nowrap festzulegen. Im Folgenden finden Sie Beispiele für zwei Verwendungszwecke:

/* 在样式表中设置 */
.no-wrap {
  white-space: nowrap;
}

/* 在HTML元素内部设置 */
<div style="white-space:nowrap;">这一整段文本不允许换行</div>

Indem Sie das Anzeigeattribut des Texts auf „inline-block“ oder „block“ setzen und das Attribut „nowrap“ hinzufügen, können Sie eine einzelne Zeile ohne Umbruch erreichen, was aber gleichzeitig nicht der Fall ist Blenden Sie einen Teil des Inhalts aus, erlauben Sie jedoch horizontales Scrollen, um den vollständigen Text anzuzeigen. Zum Beispiel das folgende Beispiel:

/* 在样式表中设置 */
.text-nowrap {
  display: inline-block;
  white-space: nowrap;
  overflow: scroll;
  max-width: 100%;
}

Diese Einstellungsmethode eignet sich zum Einschränken von Text in einem Container mit fester Breite ohne Umbruch und ermöglicht gleichzeitig horizontales Scrollen.

Zusammenfassung

In CSS ist das Erzwingen von Zeilenumbrüchen ein gängiges Stilattribut. Durch den Wert „nowrap“ des Attributs „white-space“ können wir die Einschränkung „Keine Zeilenumbrüche“ für eine einzelne Textzeile leicht implementieren. In der tatsächlichen Entwicklung wird die Textanzeige ohne Zeilenumbruch normalerweise auf Szenarien wie Tabellen, Navigationsleisten und Textlayouts angewendet. Durch Festlegen der Anzeigeattribute und Überlaufattribute können wir den Text auch horizontal scrollen lassen, ohne die Breite des Containers zu überschreiten, wodurch der gesamte Inhalt angezeigt wird.

Das obige ist der detaillierte Inhalt vonCSS erzwingt, dass Zeilenumbrüche nicht zulässig sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!