Wie kann ich mit CSS eine mehrzeilige Textüberlauf-Ellipse erstellen?

Textüberlauf-Auslassungspunkte in mehreren Zeilen

Während CSS-Regeln Text mit Auslassungspunkten effektiv abschneiden können, wenn er bestimmte Grenzen überschreitet, wird derselbe Effekt erzielt Mehrere Zeilen können eine Herausforderung sein. Die Verwendung einer Kombination von CSS-Eigenschaften macht es jedoch möglich.

Um Auslassungspunkte in mehreren Zeilen zu erreichen, kann der folgende Ansatz verwendet werden:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

So funktionieren diese Eigenschaften:

• display: -webkit-box: Legt das Element als flexible Box fest model.
• -webkit-line-clamp: 3: Gibt die maximale Anzahl an Zeilen an, die der Text einnehmen sollte, bevor er abgeschnitten wird. In diesem Fall ist es auf 3 Zeilen eingestellt.
• -webkit-box-orient: vertikal: Richtet die Box vertikal aus, sodass der Text auf mehreren Zeilen umbrochen werden kann.
• overflow: versteckt: Stellt sicher dass überschüssiger Inhalt außerhalb der angegebenen Zeilen nicht angezeigt wird.
• text-overflow: ellipsis: Löst die Auslassungspunkte aus, wenn der Text über die angegebenen Zeilen hinausgeht Zeilen.

Mit diesen Eigenschaften kann Text elegant auf mehrere Zeilen gekürzt werden, was eine klare und prägnante Anzeige ermöglicht.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS eine mehrzeilige Textüberlauf-Ellipse erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!