Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich einen mehrzeiligen Textüberlauf mit Auslassungspunkten in CSS?

Wie erstelle ich einen mehrzeiligen Textüberlauf mit Auslassungspunkten in CSS?

Mary-Kate Olsen
Freigeben: 2024-12-03 01:26:11
Original
248 Leute haben es durchsucht

How to Create a Multi-Line Text Overflow with Ellipsis in CSS?

Mehrzeiliger Textüberlauf mit Auslassungspunkten in CSS

Textüberlauf mit Auslassungspunkten zu erreichen, aber mehrere Zeilen zuzulassen, kann eine Herausforderung sein. CSS-Eigenschaften können dies jedoch effektiv erreichen.

Um einen dreizeiligen Ellipseneffekt zu erstellen, verwenden Sie den folgenden Code:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
Nach dem Login kopieren

Dieser Code verwendet die „-webkit-box“ und „ -webkit-line-clamp“-Eigenschaften, um den Text in ein Feld mit drei Zeilen zu zwingen. Die Eigenschaft „-webkit-box-orient“ legt die Ausrichtung auf vertikal fest, während „overflow: versteckt“ und „text-overflow: ellipsis“ den Ellipseneffekt erzeugen.

Wenn Sie auf Probleme mit der Browserkompatibilität stoßen, versuchen Sie es mit Folgende Fallback-Option:

display: flex;
flex-wrap: wrap;
line-height: 1.5em;
height: 4.5em;
overflow: hidden;
text-overflow: ellipsis;
Nach dem Login kopieren

Diese Eigenschaften erzwingen auch, dass der Text in mehrere Zeilen aufgeteilt wird und einen Auslassungsüberlauf ermöglicht.

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

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage