Heim >Web-Frontend >CSS-Tutorial >Kann CSS nur in der zweiten Textzeile Auslassungspunkte erstellen?

Kann CSS nur in der zweiten Textzeile Auslassungspunkte erstellen?

DDD
DDDOriginal
2024-12-16 03:47:12599Durchsuche

Can CSS Create an Ellipsis Only on the Second Line of Text?

CSS-Auslassungspunkte in der zweiten Zeile erreichen

Es stellt sich die Frage: Kann CSS text-overflow: ellipsis speziell auf die zweite Zeile von angewendet werden? Text? Eine sorgfältige Suche hat keine brauchbare Lösung ergeben. Lassen Sie uns einen alternativen Ansatz erkunden:

WebKit-Browserlösung:

Der folgende CSS-Code zielt auf WebKit-Browser ab und erzeugt effektiv Auslassungspunkte in der zweiten Zeile:

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

Verstehen Code:

  • Überlauf: Ausgeblendet verhindert jeglichen Überlauf außerhalb des Containerbereichs.
  • Textüberlauf: Auslassungspunkte lösen die Auslassungspunkte beim Abschneiden aus.
  • Anzeige: -webkit-box und -webkit-box-orient: Vertical aktivieren die Eigenschaft -webkit-line-clamp Funktion.
  • -webkit-line-clamp: 3 gibt an, dass maximal drei Zeilen angezeigt werden, wodurch die Auslassungspunkte effektiv auf die zweite Zeile beschränkt werden.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn