Wie erreicht man einen mehrzeiligen Textüberlauf mit Ellipsen 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;
}

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!

css chrome safari webkit if for while require Property number default this display overflow Other

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn