CSS-Text jenseits von Ellipsen

Die Text-Beyond-Ellipse-Technologie in CSS macht lange Textabsätze besser lesbar und verschönert auch Webseiten. In diesem Artikel werfen wir einen genaueren Blick auf einige verschiedene Formen von Auslassungspunkten und wie Sie diese entsprechend Ihren Anforderungen definieren.

1. Warum Ellipsen verwenden?

Wenn Text die Breite oder Höhe seines Containers in einer Website oder Anwendung überschreitet, kann die Textüberlauf-Kürzungstechnologie verwendet werden, um den Überschuss zu verbergen und am Ende des Textes Auslassungspunkte anzuzeigen. Diese Technik macht die Seite übersichtlicher und vermeidet Unordnung, wenn der Text überläuft.

2. Wie verwende ich Ellipsen in CSS?

Um Textüberlauf-Auslassungspunkte in CSS zu verwenden, müssen Sie die folgenden drei Attribute verwenden:

1. text-overflow-Attribut

#🎜 🎜Die Eigenschaft #text-overflow definiert, was passiert, wenn Text den Container überläuft. Mithilfe dieser Eigenschaft können Sie die folgenden Textüberlauftypen erstellen und definieren:

*clip: Den überlaufenden Teil des Textes abschneiden.

*Ellipse: Zeigt Ellipsen am Rand des Containers an, wo der Text überläuft.

White-Space-Attribut

Das White-Space-Attribut wird verwendet, um zu definieren, wie mit Leerzeichen im Text umgegangen wird, einschließlich Leerzeichen, Zeilenumbrüche usw . Normalerweise verwenden wir die folgenden drei Werte:

*normal: Es werden keine Zeilenumbrüche erzwungen und die Leerzeichen zwischen Wörtern werden automatisch angepasst.

*nowrap: Textumbruch nicht zulassen.

*Vorumbruch: Halten Sie den Text in einem vorgegebenen Format. Wenn der Text Leerzeichen enthält, teilen Sie ihn entsprechend den Leerzeichen auf.

Overflow-Eigenschaft

Die Overflow-Eigenschaft wird verwendet, um zu definieren, wie Inhalt innerhalb seines Containers überläuft. Normalerweise verwenden wir die folgenden zwei Attribute:

*visible: Ermöglicht, dass Inhalte den Container überlaufen.

*versteckt: Der Inhalt darf nicht über den Behälter laufen und der überschüssige Teil wird abgeschnitten.

3. Mehrere verschiedene Ellipsenstile

Einzeiliger Ellipsenstil

Wenn nur eine Textzeile vorhanden ist weggelassen werden soll Sie können den einzeiligen Ellipsenstil verwenden:

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

Mehrzeiliger Ellipsenstil

Wenn der Text weggelassen werden soll mehrere Zeilen, Sie können mehrere Zeilen verwenden. Linien-Auslassungsstil:

.ellipsis{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

Auslassungspunkte verwenden, wenn eine bestimmte Anzahl von Zeichen überschritten wird

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

4. Zusammenfassung
Durch die Verwendung von CSS-Textüberlauf-, Leerraum- und Überlaufeigenschaften können wir Textüberlauftypen durch verschiedene Auslassungspunkte-Stile erstellen und definieren. Dazu gehören einzeilige Ellipsenstile, mehrzeilige Ellipsenstile und die Verwendung von Auslassungspunkten, wenn eine bestimmte Anzahl von Zeichen überschritten wird. Diese Technik kann die Seite aufgeräumter machen und ein verwirrendes Seitenlayout vermeiden, wenn der Text überläuft.

Das obige ist der detaillierte Inhalt vonCSS-Text jenseits von Ellipsen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!