CSS ohne Zeilenumbrüche

Im Webdesign ist CSS (Cascading Style Sheets) ein wesentlicher Bestandteil. CSS kann das Layout, den Stil und das Verhalten von Webseiten steuern. Einer der grundlegenden Stilelemente ist die Art und Weise, wie der Text umbrochen wird. Wenn der Text das Ende einer Zeile erreicht, springt der Browser standardmäßig automatisch zur nächsten Zeile um. Manchmal müssen wir jedoch Text ohne Zeilenumbrüche anzeigen. In diesem Artikel wird erläutert, wie Sie mit CSS den Effekt von Zeilenumbrüchen erzielen.

1. Leerraumattribut

Es gibt ein Leerraumattribut in CSS, das bestimmt, wie Text innerhalb eines Elements verarbeitet wird, einschließlich Leerzeichen und Zeilenumbrüchen. Standardmäßig ist der Wert des White-Space-Attributs normal, was bedeutet, dass die Zeile automatisch umgebrochen wird, wenn ein Leerzeichen oder ein Zeilenumbruchzeichen auftritt. Wir können jedoch den Effekt erzielen, dass kein Zeilenumbruch erfolgt, indem wir den Wert dieser Eigenschaft festlegen.

1.white-space:normal

Standardmäßig ist der Wert des Leerraumattributs normal, was bedeutet, dass der Text innerhalb des Elements automatisch umbrochen wird, wenn er auf Leerzeichen, Tabulatoren, Zeilenumbrüche und andere Markierungen trifft. Wenn Sie den Effekt erzielen möchten, dass kein Zeilenumbruch erfolgt, müssen Sie den Attributwert wie unten gezeigt auf nowrap setzen:

p {
  white-space: nowrap;
}

Die Bedeutung dieses Codes besteht darin, den Text im p-Element so festzulegen, dass er nicht umgebrochen wird.

2. white-space:pre

Zusätzlich zu nowrap hat das White-Space-Attribut weitere optionale Werte, wie zum Beispiel pre. Wenn der Wert des White-Space-Attributs pre ist, zeigt der Browser den Text innerhalb des Elements in vorformatierter Weise an, einschließlich Leerzeichen, Tabulatoren, Zeilenumbrüche usw. Wenn Sie diesen Attributwert anwenden möchten, müssen Sie den Code nur wie folgt ändern:

p {
  white-space: pre;
}

3. white-space:pre-wrap

Ein weiterer Wert ist pre-wrap, der einige Zeilenumbrüche erzwingen und gleichzeitig die natürliche Linie beibehalten kann Umbrüche. Vorformatierte Leerzeichen oder Zeilenumbrüche. Der folgende Code fügt beispielsweise zwei Leerzeichen zwischen jedem Wort ein:

p {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-spacing: 2px;
}

Bei Verwendung des Pre-Wrap-Attributs können wir auch das Word-Wrap-Attribut und das Word-Spacing-Attribut festlegen, um die Anzeige von Text weiter zu steuern.

2. Textüberlauf-Attribut

Zusätzlich zum Leerraumattribut gibt es auch ein CSS-Attribut, das üblicherweise verwendet wird, um keine Zeilenumbrüche zu erreichen: Textüberlauf. Dieses Attribut wird verwendet, um übermäßig langen Text in Inline-Elementen oder Blockelementen abzuschneiden und ihn mit Auslassungspunkten darzustellen, wodurch bis zu einem gewissen Grad der Effekt erzielt wird, dass keine Zeilenumbrüche auftreten.

Das text-overflow-Attribut hat drei optionale Werte:

1. ellipsis: Auslassungspunkte
2. clip: Text abschneiden
3. string: benutzerdefinierte Zeichenfolge

Der folgende Code zeigt, wie das text-overflow-Attribut verwendet wird, um übermäßig langen Text zu entfernen Der Text wird abgeschnitten und mit Auslassungspunkten angezeigt:

p {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

In diesem Beispiel legen wir zunächst die Breite des Elements auf 150 Pixel fest und setzen dann das White-Space-Attribut auf nowrap, damit der Text nicht umbrochen wird. Als nächstes setzen Sie das Überlaufattribut auf „verborgen“, sodass der Teil des Texts, der über die Grenzen des Elements hinausgeht, ausgeblendet wird. Setzen Sie abschließend die Eigenschaft text-overflow auf ellipse, sodass der abgeschnittene Text als Ellipsen angezeigt wird.

3. Wortumbruch-Attribut

Das Wortumbruch-Attribut wird verwendet, um die Art und Weise zu steuern, wie Text umbrochen wird. Beachten Sie, dass es nur für englische und andere Texte wirksam ist, deren Wörter durch Leerzeichen getrennt sind, und nicht für chinesische und andere Texte ohne Leerzeichen funktioniert. Das Attribut

word-break hat drei optionale Werte:

1. normal: Verwenden Sie die Standardregeln für Zeilenumbrüche, d. h. das Wort wird nicht in zwei oder mehr Zeilen aufgeteilt.
2. Alles umbrechen: Unterbricht Text innerhalb von Wörtern.
3. keep-all: Zeilen nur zwischen Hauptzeichen (z. B. Kanji-, Katakana- und Tani-Silben) umbrechen.

Der folgende Code zeigt, wie Sie mit Word-Break den Textumbruch steuern:

p {
  width: 100px;
  word-break: break-all;
}

In diesem Beispiel legen wir die Breite des p-Elements auf 100 Pixel fest und setzen dann das Word-Break-Attribut auf break-all , wird verwendet, um Text innerhalb von Wörtern zu unterbrechen.

Zusammenfassung

Das Obige ist die in diesem Artikel vorgestellte CSS-Methode ohne Zeilenumbruch, einschließlich des Leerraumattributs, des Textüberlaufattributs und des Wortumbruchattributs. Im tatsächlichen Webdesign können wir diese Attribute flexibel entsprechend den spezifischen Anforderungen verwenden, um Seitenstil- und Layouteffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonCSS ohne Zeilenumbrüche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!