Wie kann ich Text in der zweiten Zeile mithilfe von CSS abschneiden?

Text in bestimmten Zeilen in CSS abschneiden: Das Ellipsen-Rätsel entwirren

Ursprüngliche Frage:

„Wie kann ich das erreichen Textauslassungspunkte speziell in der zweiten Zeile mit CSS? Trotz der Suche im Internet bin ich darauf gestoßen mit leeren Händen.“

Antwort:

Während CSS keine direkte Möglichkeit bietet, Text in einer bestimmten Zeile abzuschneiden, können Sie diesen Effekt in Webkit-Browsern mit erreichen das folgende CSS Eigenschaften:

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

Erklärung:

• overflow: versteckt: Diese Eigenschaft verhindert, dass der Inhalt über die Grenzen des Containers hinaus überläuft.
• text-overflow: ellipsis: Diese Eigenschaft weist den Browser an, Auslassungspunkte (...) zu verwenden, wenn der Text den verfügbaren Wert überschreitet Leerzeichen.
• display: -webkit-box: Diese Eigenschaft legt fest, dass der Container ein Webkit-Box-Modell ist, das zusätzliche Styling-Optionen ermöglicht.
• -webkit-line-clamp: 3: Dies Die Eigenschaft beschränkt den Container auf drei Textzeilen.
• -webkit-box-orient: vertikal: Diese Eigenschaft legt die Ausrichtung des Boxmodells auf vertikal fest, sodass der Text in mehrere Zeilen umgebrochen werden kann Zeilen.

Browser-Unterstützung:

Beachten Sie, dass diese Lösung nur in Webkit-Browsern unterstützt wird, einschließlich Safari, Chrome und Microsoft Edge.

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