Kann CSS in der zweiten Textzeile Auslassungspunkte erstellen?

CSS-Auslassungspunkte in der zweiten Zeile: Ist das machbar?

In CSS wird text-overflow: ellipsis häufig verwendet, um abgeschnittenen Text anzuzeigen eine Ellipse (...). Die Implementierung von Auslassungspunkten in der zweiten Zeile eines mehrzeiligen Textblocks war jedoch lange Zeit eine Herausforderung.

Um diesen Effekt zu erzielen, kann man, anstatt sich auf Textüberlauf zu verlassen, die Verwendung von -webkit-line- in Betracht ziehen. Klammereigenschaft. Diese Eigenschaft begrenzt die Anzahl der in einem Blockcontainer angezeigten Zeilen. Durch die Kombination mit display: -webkit-box und -webkit-box-orient: Vertical können Sie den Text auf eine bestimmte Anzahl von Zeilen beschränken. Um das Clipping sicherzustellen, wird „overflow:hidden“ empfohlen.

Der folgende Codeausschnitt veranschaulicht diesen Ansatz:

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

Diese Technik nutzt -webkit-Präfixe, wodurch sie mit Webkit-Browsern kompatibel ist. Es ist jedoch zu beachten, dass die Unterstützung für diese spezielle Kombination je nach Browserversion unterschiedlich sein kann.

Das obige ist der detaillierte Inhalt vonKann CSS in der zweiten Textzeile Auslassungspunkte erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!