Verwenden von CSS zum Implementieren der Textkürzung in HTML

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von CSS zum Implementieren der Textkürzung in HTML vorstellen. Schauen wir uns das unten an.

Einzeilige TextkürzungTextüberlauf

Textüberlauf sollte das sein, was wir oft verwenden: Textüberlauf: Auslassungspunkte. Ich glaube, jeder kennt es Das Abschneiden einzeiliger Texte ist in wenigen Schritten mit nur einer Codezeile möglich.

div {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;
}

Der Attributbrowser unterstützt nativ und ist gut mit den gängigen Browsern kompatibel. Der Nachteil besteht darin, dass er nur das Abschneiden von einzeiligem Text und nicht das Abschneiden von mehrzeiligem Text unterstützt.

Anwendbare Szenarien: Das Abschneiden von einzeiligem Text ist am einfachsten zu implementieren und hat die beste Wirkung, sodass Sie es bedenkenlos verwenden können.

Wenn es sich um einen mehrzeiligen Textabfangeffekt handelt, ist die Implementierung nicht so einfach.

-webkit-line-clamp implementiert

über das Attribut -webkit-line-clamp. Die spezifische Methode lautet wie folgt:

div {  display: -webkit-box;  overflow: hidden;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;
}

Sie muss in Verbindung mit display, -webkit-box-orient und overflow verwendet werden:

display: -webkit-box muss sein; kombiniert mit den Attributen des Objekts. Wird als elastisches skalierbares Boxmodell angezeigt.

-webkit-box-orient; muss mit dem Attribut kombiniert werden, um die Anordnung der Unterelemente des Flex-Box-Objekts festzulegen oder abzurufen

text-overflow: ellipsis optionales Attribut, kann für mehrere Zwecke verwendet werden. Bei Zeilentext verwenden Sie die Auslassungspunkte „…“, um den Text außerhalb des Bereichs auszublenden.

Aus Sicht der Wirkung sind seine Vorteile:

Responsive Kürzung, angepasst an unterschiedliche Breiten

Die Ellipsen werden nur angezeigt, wenn der Text den Bereich überschreitet, andernfalls werden die Auslassungspunkte nicht angezeigt

Browsernative Implementierung, sodass die Position der Auslassungspunkte genau richtig angezeigt wird

Aber der Nachteil ist auch sehr direkt, da -webkit-line-clamp ein nicht standardisiertes Attribut ist und es erscheint nicht im CSS-Spezifikationsentwurf. Mit anderen Worten: Nur Browser mit Webkit-Kern unterstützen dieses Attribut. Browser wie Firefox und IE unterstützen dieses Attribut nicht und die Browserkompatibilität ist nicht gut.

Verwendungsszenarien: Wird hauptsächlich für mobile Seiten verwendet, da Browser für mobile Geräte eher auf dem Webkit-Kernel basieren. Zusätzlich zur schlechten Kompatibilität ist der Kürzungseffekt gut.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

Detaillierte Erläuterung der Verwendung der js-xlsx-Toolbibliothek xlsxUtils

Integration täglicher gemeinsamer Funktionen von JS

Das obige ist der detaillierte Inhalt vonVerwenden von CSS zum Implementieren der Textkürzung in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!