Mehrzeilige Textauslassungspunkte: Ist das mit reinem CSS möglich?

Textauslassungspunkte in mehreren Zeilen: Ist das möglich?

Die Möglichkeit, überlaufenden Text mit Auslassungspunkten (...) abzuschneiden, ist eine allgemeine CSS-Anforderung. Die Standardeigenschaft text-overflow funktioniert jedoch nur in einer einzelnen Zeile. Dies wirft die Frage auf: Können wir dieses Verhalten in mehreren Zeilen reproduzieren und den Text nach Bedarf umbrechen lassen?

Die Antwort ist ein klares Ja. Mit speziell für diesen Zweck entwickelten CSS-Eigenschaften ist es möglich, den gewünschten Effekt zu erzielen, ohne auf JavaScript zurückgreifen zu müssen. Zum Beispiel:

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

Dieser Code erstellt ein Div, das Text in bis zu drei Zeilen anzeigt, wobei der verbleibende Text durch Auslassungspunkte ersetzt wird. Durch Anpassen der Eigenschaft -webkit-line-clamp können Sie die maximale Anzahl der angezeigten Zeilen steuern.

Beachten Sie, dass diese Technik derzeit nur in WebKit-basierten Browsern wie Safari und Chrome funktioniert. Wenn Sie browserübergreifende Kompatibilität benötigen, können Sie die Verwendung eines Polyfills oder einer komplexeren JavaScript-Lösung in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonMehrzeilige Textauslassungspunkte: Ist das mit reinem CSS möglich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!