Wie kann ich in CSS für Webkit-Browser eine mehrzeilige Ellipse erstellen?

Mehrzeilige Textkürzung mit Auslassungspunkten in CSS

Die Notwendigkeit, langen Text zu komprimieren und gleichzeitig seine Lesbarkeit zu bewahren, ist eine häufige Herausforderung im Webdesign . CSS bietet die Eigenschaft „text-overflow“, um Text mit Auslassungspunkten abzuschneiden. Normalerweise gilt dies jedoch für einzeilige Szenarios. Ist es möglich, Auslassungspunkte in der zweiten Textzeile anzuwenden?

Das technische Dilemma

Im bereitgestellten Beispiel besteht der gewünschte Effekt darin, dass die Auslassungspunkte in der angezeigt werden zweite Zeile. Das Standardverhalten schneidet jedoch den Text in der ersten Zeile ab, wie im bereitgestellten HTML-Markup veranschaulicht:

<p>I hope someone could help me. I need 
an ellipsis on the second line of...</p>

Eine Lösung für Webkit-Browser

Während CSS dies tut Da mehrzeilige Auslassungspunkte nicht nativ unterstützt werden, ist für Webkit-basierte Browser (wie Safari und Chrome) eine Problemumgehung verfügbar. Das folgende CSS-Snippet erzielt den gewünschten Effekt:

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

Implementierung

Die CSS-Eigenschaften im Snippet wirken wie folgt zusammen:

• Überlauf: Ausgeblendet verhindert, dass der Text über den angegebenen Bereich hinausläuft.
• Textüberlauf: Ellipse aktiviert die Ellipsenkürzung.
• display: -webkit-box und -webkit-line-clamp: 3 begrenzen die Anzahl der sichtbaren Textzeilen auf drei.
• -webkit-box-orient: Vertical ordnet die Textzeilen vertikal an.

Browser Kompatibilität

Es ist wichtig zu beachten, dass diese Lösung nur in Webkit-Browsern funktioniert. Andere Browser unterstützen diesen Ansatz möglicherweise nicht. Es bietet jedoch eine zuverlässige Methode für mehrzeilige Ellipsen im angegebenen Kontext.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS für Webkit-Browser eine mehrzeilige Ellipse erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!