Was sind die Auslassungspunkte in CSS ohne Zeilenumbrüche?

Die CSS-Auslassungspunkte sind ein sehr praktischer Effekt, der es ermöglicht, längeren Text in einer Zeile anzuzeigen und am Ende Auslassungspunkte hinzuzufügen. Dies hat sehr gute Auswirkungen auf die Verschönerung des Layouts und die Verbesserung der Benutzererfahrung.

In CSS verwenden wir normalerweise Textüberlauf, um den Auslassungseffekt zu erzielen. Im eigentlichen Bewerbungsprozess werden wir jedoch feststellen, dass ein zu langer Text in einer Zeile zu Layoutverwirrungen und Situationen führen kann, die nicht unseren Erwartungen entsprechen.

Wenn wir nicht möchten, dass der Text zu lang wird und Layoutprobleme verursacht, können wir das Nowrap-Attribut in CSS verwenden, um den Textumbruch zu deaktivieren. Obwohl dieses Attribut nicht oft verwendet wird, kann es in der tatsächlichen Entwicklung sehr praktische Auswirkungen haben.

Als nächstes stellen wir detailliert vor, wie das Nowrap-Attribut verwendet wird.

Schritt eins: Textumbruch deaktivieren

Bevor wir das Nowrap-Attribut verwenden, müssen wir zuerst den Textumbruch deaktivieren. Im CSS-Textlayout gibt es drei Möglichkeiten, den Textumbruch zu deaktivieren:

1. Verwenden Sie das White-Space-Attribut.

Das White-Space-Attribut kann verwendet werden, um den Textumbruch innerhalb eines Elements zu steuern. Es gibt folgende Attributwerte:

1) normal: Standardwert, d. h. keine spezielle Verarbeitung von Leerzeichen und keine Einschränkungen für Zeilenumbrüche innerhalb von Wörtern.

2) vor: Behalten Sie Leerzeichen bei und der Text wird an der Position im Quellcode umgebrochen.

3) nowrap: Kein Zeilenumbruch.

Wir müssen den Leerraum auf „nowrap“ setzen, um einen Textumbruch innerhalb des Elements zu verhindern.

Beispielcode:

p {
  white-space: nowrap;
}

2. Verwendung des Wortumbruch-Attributs

Mit dem Wortumbruch-Attribut kann gesteuert werden, wie Wörter umgebrochen werden. Es gibt die folgenden Attributwerte:

1) normal: Standardwert, d. h. es werden die Standardregeln für den Zeilenumbruch verwendet.

2) Alles behalten: Wortaufteilung deaktivieren.

3) Alle umbrechen: Zeilenumbrüche innerhalb von Wörtern zulassen.

Wir müssen das Attribut „word-break“ auf „keep-all“ setzen, damit das Wort intakt bleibt.

Beispielcode:

p {
  word-break: keep-all;
}

3. Verwendung des Überlaufattributs

Wenn der Inhalt eines Elements den Umfang des Containers überschreitet, können wir das Überlaufattribut verwenden, um zu steuern, wie der Inhalt überläuft. Es gibt folgende Attributwerte:

1) sichtbar: Der Standardwert, der die Anzeige von Inhalten außerhalb des Containers ermöglicht.

2) versteckt: Inhalte außerhalb des Containers ausblenden.

3) Auto: Inhalte automatisch scrollen und anzeigen.

4) Scrollen: Erzwingen Sie die Anzeige der Bildlaufleiste, sodass Inhalte außerhalb des Containerbereichs angezeigt werden können.

Wir müssen das Überlaufattribut auf „versteckt“ setzen, um den Inhalt außerhalb des Containers zu verbergen.

Beispielcode:

div {
  overflow: hidden;
}

Schritt 2: Ellipsen hinzufügen

Der nächste Schritt besteht darin, Ellipsen hinzuzufügen. Wir müssen das text-overflow-Attribut verwenden und es auf Auslassungspunkte setzen, wodurch am Ende des Textes Auslassungspunkte hinzugefügt werden.

Beispielcode:

p {
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

Das vervollständigt unseren Effekt. Nach Verwendung des Nowrap-Attributs wird der Textinhalt nicht automatisch umbrochen, sondern in einer Zeile angezeigt. Wenn der Text den Umfang des Containers überschreitet, wird der verborgene Teil durch Ellipsen ersetzt.

Es ist zu beachten, dass nach Verwendung des Nowrap-Attributs der Textinhalt sehr schmal wird, was dazu führt, dass die Schriftart reduziert und das Durchsuchen erschwert wird. Daher müssen Sie bei Verwendung des Nowrap-Attributs entsprechende Anpassungen an der Schriftgröße vornehmen.

Fazit

Der Auslassungseffekt in CSS Durch die Verwendung des Nowrap-Attributs kann der Text in einer Zeile angezeigt werden und am Ende wird ein Auslassungszeichen hinzugefügt. Dieser Effekt eignet sich für längere Texte, die bei der Anzeige einen guten Layouteffekt beibehalten müssen. Es ist zu beachten, dass bei Verwendung des Nowrap-Attributs die Schriftgröße entsprechend angepasst werden muss, um das Benutzererlebnis nicht zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWas sind die Auslassungspunkte in CSS ohne Zeilenumbrüche?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!