Wie implementiert man mehrzeilige Textauslassungspunkte mit CSS?

Textauslassungen in mehreren Zeilen implementieren

Während CSS allein die Textkürzung mit Auslassungspunkten für einzeiligen Überlauf ermöglichen kann, wird derselbe Effekt erzielt Mehrere Leitungen können eine Herausforderung darstellen. Die Frage „Textüberlauf-Auslassungspunkte in zwei Zeilen [Duplikat]“ untersucht dieses Problem.

Auf den ersten Blick scheint die Kombination von CSS-Eigenschaften wie „text-overflow: ellipsis“ und „white-space: nowrap“ für Text ausreichend zu sein Kürzung. Allerdings verhindert „white-space:nowrap“ das Umbrechen von Text, was zu abgeschnittenem Text in einer einzelnen Zeile führt, obwohl ausreichend Platz für weitere Zeilen vorhanden ist.

Um diese Einschränkung zu überwinden, berücksichtigen Sie die folgenden CSS-Eigenschaften:

• display: -webkit-box: Initialisiert ein flexibles Box-Layoutmodell, das mehrere Zeilen von ermöglicht Text.
• -webkit-line-clamp: 3: Definiert die maximale Anzahl an Zeilen, die der Text einnehmen soll (in diesem Fall 3).
• -webkit-box-orient: Vertical: Richtet das Box-Layout vertikal aus und ermöglicht so Mehrzeilen Text.
• overflow: versteckt: Versteckt jeden Text, der über die angegebenen Zeilen hinausgeht.
• text-overflow: ellipsis: Fügt Auslassungspunkte zu abgeschnittenem Text hinzu.

Mit diesen Eigenschaften können Sie mehrzeilige Textauslassungspunkte als erreichen folgt:

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

Diese CSS-Lösung ermöglicht effektiv, dass Text in mehrere Zeilen überläuft und mit Auslassungspunkten abgeschnitten wird, wenn die angegebene Zeilenbegrenzung erreicht ist.

Das obige ist der detaillierte Inhalt vonWie implementiert man mehrzeilige Textauslassungspunkte mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!