Wie schneide ich Text in der zweiten Zeile mit CSS ab?

CSS-Kürzung in der zweiten Zeile: Eine detaillierte Lösung

Das Erreichen einer Textkürzung in der zweiten Zeile mithilfe von CSS kann eine Herausforderung sein, die nicht klar ist Dokumentation online. Dieser Artikel bietet eine Schritt-für-Schritt-Lösung, die Ihnen hilft, dieses Hindernis zu überwinden.

Das Ziel besteht darin, am Ende der zweiten Textzeile anstelle der gesamten Textzeile ein Auslassungszeichen (...) anzuzeigen Text läuft in eine dritte Zeile über.

Um diesen Effekt zu erzielen, verwenden wir bestimmte CSS-Eigenschaften:

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

Diese Eigenschaften funktionieren in Verbindung als folgt:

• Overflow: Hidden hält den Text innerhalb des definierten Bereichs.
• text-overflow: ellipsis fügt die Auslassungspunkte hinzu, wenn der Text den verfügbaren Platz überschreitet.
• display: -webkit-box und -webkit-line-clamp: 3 stellen sicher, dass der Text in mehrere Zeilen umgebrochen wird, jedoch auf drei begrenzt ist Linien.
• -webkit-box-orient: Vertical richtet die Linien vertikal aus.

Beachten Sie, dass diese Lösung nur in WebKit-Browsern wie Chrome und Safari vollständig unterstützt wird. Andere Browser erfordern möglicherweise andere Ansätze oder unterstützen die Textkürzung in der zweiten Zeile möglicherweise nicht explizit.

Das obige ist der detaillierte Inhalt vonWie schneide ich Text in der zweiten Zeile mit CSS ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!