Wie erstelle ich einen mehrzeiligen Textüberlauf mit Auslassungspunkten 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;

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;

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!