Wie erreicht man einen mehrzeiligen Textüberlauf mit Ellipsen in CSS?-CSS-Tutorial-php.cn

Wie erreicht man einen mehrzeiligen Textüberlauf mit Ellipsen in CSS?

Patricia Arquette

Freigeben： 2024-12-03 09:38:11

Original

816 Leute haben es durchsucht

How to Achieve Multiline Text Overflow with Ellipsis in CSS?

Mehrzeiliger Textüberlauf mit Auslassungspunkten

In CSS ermöglicht die Textüberlaufeigenschaft das Abschneiden von Text, wenn er den festgelegten Bereich überschreitet. Standardmäßig erfolgt diese Kürzung jedoch in einer einzelnen Zeile. Manchmal ist es wünschenswert, den Text in mehreren Zeilen umbrechen zu lassen und gleichzeitig anzuzeigen, dass noch mehr zu sehen ist.

Erzielen eines mehrzeiligen Überlaufs mit Ellipsen

Um diesen Effekt zu erzielen können wir die folgenden CSS-Eigenschaften nutzen:

display: -webkit-box;: Diese Eigenschaft erstellt einen flexiblen Container, der mehrere Zeilen aufnehmen kann.
-webkit-line-clamp: 3;: Gibt die maximal zulässige Anzahl von Zeilen an bevor die Auslassungspunkte erscheinen (z. B. auf 3 für einen dreizeiligen Überlauf setzen).
-webkit-box-orient: vertikal;: Stellt sicher, dass Zeilen innerhalb des Containers vertikal gestapelt werden.
Überlauf: ausgeblendet;: Versteckt jeglichen Text, der über die Grenzen des Containers hinausgeht.
text-overflow: ellipsis;: Fügt die Auslassungspunkte (...) am Ende des letzten sichtbaren Texts hinzu Zeile.

Beispielverwendung

div {
  width: 300px;
  height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Nach dem Login kopieren

Wenn diese Eigenschaften vorhanden sind, kann Text innerhalb des

Das Element wird je nach Bedarf in mehreren Zeilen umbrochen. Wenn der Text jedoch den verfügbaren Platz in der dritten Zeile überschreitet, wird er abgeschnitten und am Ende werden Auslassungspunkte angezeigt.

Hinweis: Diese Eigenschaften werden nur von WebKit-basiert unterstützt Browser, einschließlich Chrome und Safari. Andere Browser erfordern möglicherweise alternative Lösungen.

Das obige ist der detaillierte Inhalt vonWie erreicht man einen mehrzeiligen Textüberlauf mit Ellipsen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!