So erreichen Sie keine Zeilenumbrüche in CSS

CSS ist eine Stylesheet-Sprache, die häufig in der Front-End-Entwicklung verwendet wird und zum Festlegen von Layout, Schriftarten, Farben, Größen und anderen Stilen von Webseiten verwendet wird. Beim Schreiben von CSS-Stilen stoßen wir häufig auf lange Sätze oder lange Codes, die Zeilenumbrüche erfordern. Aber manchmal möchten wir Zeilen nicht umbrechen und möchten, dass sie in einer Zeile angezeigt bleiben. In diesem Artikel erfahren Sie, wie Sie im CSS-Code keine Zeilenumbrüche erzielen.

1. Warum wird der Code automatisch umgebrochen?

Lassen Sie uns zunächst den Grund verstehen, warum der Code automatisch umgebrochen wird. Wenn im Code der Attributwert eines Elements zu lang ist und die Anzeige unvollständig ist, brechen die meisten Browser den Text standardmäßig automatisch um. Der Zweck besteht darin, das Lesen und Warten zu erleichtern und die Lesbarkeit des Codes sicherzustellen.

Das Folgende ist beispielsweise ein CSS-Code:

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #eee;
}

Wenn einer der Attributwerte zu lang ist und den sichtbaren Bereich des Editors oder Browsers überschreitet, wird er automatisch umgebrochen und zum Folgender Code:

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #eee;
}

Wie folgt: Obwohl es besser lesbar ist, müssen wir einige spezielle Techniken verwenden, um mit bestimmten Situationen umzugehen, in denen wir Platz sparen oder keine Zeilenumbrüche erzwingen müssen.

2. Lösung für nicht umbrechenden CSS-Code

Es gibt viele Techniken für nicht umbrechenden CSS-Code:

1 Verwenden Sie das Leerzeichen-Attribut.

In CSS können wir das Leerzeichen-Attribut verwenden um die Umbruchmethode für Text festzulegen. Dieses Attribut hat drei Werte: normal (Standardwert), pre-line und nowrap.

• normal: Standardverhalten des Browsers, automatisch angepasst an Leerzeichen und Zeilenumbrüche.
• Vorzeile: Zeilenumbrüche entsprechend den tatsächlichen Zeilenumbrüchen im Text.
• nowrap: Kein Zeilenumbruch.

Wenn wir also keine Zeilenumbrüche im Code erzwingen möchten, können wir das White-Space-Attribut im Stylesheet auf nowrap setzen.

Zum Beispiel kann der folgende Code den Textinhalt ohne Umbruch in einer Zeile halten. Es überschreibt die standardmäßigen Umbrucheinstellungen und belässt den Textinhalt an seiner ursprünglichen Position.

.text {
  white-space: nowrap;
}

2. Verwenden Sie das Wortumbruch-Attribut

Das Wortumbruch-Attribut in CSS wird verwendet, um die Methode des automatischen Zeilenumbruchs anzugeben. Dieses Attribut hat 4 Werte: normal (Standardwert), Break-All, Keep-All und Break-Word.

• normal: Zeilen automatisch anhand von Leerzeichen und Bindestrichen umbrechen.
• Alle umbrechen: Wenn ein Wort zu lang ist und die Grenze des Containers überschreitet, wird automatisch in die nächste Zeile umgebrochen.
• keep-all: Vermeiden Sie Wortumbrüche innerhalb eines Wortes und legen Sie das gesamte Wort in einen schmalen Behälter.
• break-word: Ähnlich wie break-all, aber in bestimmten Fällen bleibt das gesamte Wort in derselben Zeile.

Wenn wir also keine Zeilenumbrüche im Code erzwingen möchten, können wir das Wortumbruch-Attribut im Stylesheet auf keep-all setzen.

Zum Beispiel kann der folgende Code verhindern, dass der Textinhalt umgebrochen wird und in einer Zeile bleibt. Es überschreibt die standardmäßigen Umbrucheinstellungen und behält den Textinhalt an seiner ursprünglichen Position.

.text {
  word-break: keep-all;
}

3. Verwenden Sie die Text-Overflow-Eigenschaft

Die Text-Overflow-Eigenschaft in CSS wird verwendet, um anzugeben, wie der Teil außerhalb des Textcontainers angezeigt wird. Diese Eigenschaft hat zwei Werte: Clip (Standardwert) und Auslassungspunkte.

• Clip: Schneiden Sie den Text zu und der überschüssige Teil wird ausgeblendet.
• Ellipse: Verwenden Sie Ellipsen, um überschüssige Teile zu ersetzen.

Wenn wir also keine Zeilenumbrüche im Code erzwingen und im überschüssigen Teil Auslassungspunkte anzeigen möchten, können wir das Textüberlaufattribut im Stylesheet auf Auslassungspunkte setzen.

Der folgende Code kann beispielsweise dafür sorgen, dass der Textinhalt nicht umbrochen wird, er in einer Zeile bleibt und im überschüssigen Teil Ellipsen angezeigt werden. Es überschreibt die standardmäßigen Umbrucheinstellungen und behält den Textinhalt an seiner ursprünglichen Position.

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

4. Verwenden Sie das Nowrap-Attribut

Um sicherzustellen, dass Elemente nicht umbrochen werden, gibt es in CSS ein Attribut, das dem White-Space-Attribut ähnelt und das Nowrap-Attribut genannt wird. Dieses Attribut hat nur einen Wert: nowrap, was bedeutet, dass das Umbrechen von Elementen verboten ist.

Zum Beispiel kann der folgende Code den Textinhalt ohne Umbruch in einer Zeile halten. Es überschreibt die standardmäßigen Umbrucheinstellungen und behält den Textinhalt an seiner ursprünglichen Position.

.text {
  white-space: nowrap;
}

5. Verwenden Sie das Inline-Block-Attribut

In CSS können wir auch das Display:Inline-Block-Attribut verwenden, um den Anzeigemodus des Elements beizubehalten. Dieses Attribut ermöglicht die Anzeige von Elementen in derselben Zeile ohne Umbruch.

Zum Beispiel kann der folgende Code verhindern, dass der Textinhalt umgebrochen wird und in einer Zeile bleibt. Es überschreibt die Standardeinstellungen für den Zeilenumbruch und behält den Textinhalt an seiner ursprünglichen Position.

.text {
  display: inline-block;
}

6. Verwenden Sie das Höhenattribut

In CSS können wir auch das Höhenattribut verwenden, um die Höhe des Containers anzugeben. Wenn die Höhe eines Elements auf einen bestimmten Wert festgelegt ist, kann sein Inhalt nicht automatisch umbrochen werden.

Zum Beispiel kann der folgende Code verhindern, dass der Textinhalt umgebrochen wird und in einer Zeile bleibt. Dadurch wird die Höhe des Containers auf 20 Pixel erzwungen, sodass der Textinhalt an seiner ursprünglichen Position bleibt.

.text {
  height: 20px;
}

3. Zusammenfassung

Ob wir Platz sparen wollen oder aus anderen Gründen, manchmal müssen wir in CSS keine Zeilenumbrüche erzwingen. In diesem Artikel werden sechs häufig verwendete Techniken vorgestellt, darunter Leerraumattribute, Wortumbruchattribute, Textüberlaufattribute, Nowrap-Attribute, Inline-Block-Attribute und Höhenattribute. Die Auswahl geeigneter Attribute und Werte hängt vom jeweiligen Anwendungsszenario und den Anforderungen ab.

Obwohl diese Methoden grundsätzlich verhindern, dass Elemente automatisch umbrochen werden, sind die anwendbaren Szenarien und Implementierungsmethoden jeder Methode unterschiedlich. Die Beherrschung dieser Techniken kann uns helfen, CSS-Stylesheets besser zu verwalten und die Lesbarkeit und Wartbarkeit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie keine Zeilenumbrüche in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!