So verwenden Sie CSS, um zu lange Auslassungspunkte im Titeltext anzuzeigen

In diesem Artikel wird hauptsächlich die CSS-Methode zum Anzeigen von Auslassungspunkten im langen Teil des Titeltexts vorgestellt und die Situation des einzeiligen Textüberlaufs und des mehrzeiligen Textüberlaufs erläutert.

Vor einiger Zeit stießen wir bei der Neugestaltung der mobilen Website des Unternehmens auf die Anforderung, dass der Titel einer Produktliste nur zwei Zeilen enthalten sollte und dass Zeichen, die über zwei Zeilen hinausgehen, mit Ellipsen angezeigt werden sollten. Wie in der Abbildung unten gezeigt, war der erste Eindruck damals, dass diese Anforderung nur durch Abfangen von Zeichen während der Hintergrundausgabe oder durch Berechnen von Zeichen über JS erfüllt werden kann, da der Stil das Weglassen von zeilenumgebrochenem Text nicht steuern kann, sondern weil Unsere neue Version der mobilen Website wird gestreamt. Bei Layouts ist die Breite der Zeilenumbrüche auf Mobiltelefonen bei unterschiedlichen Auflösungen ungewiss, daher gibt es keinen Standardbereich für die Anzahl der abzufangenden Zeichen. Beispiel: Auf dem iPhone werden 15 Zeichen in zwei Zeilen angezeigt, auf dem Samsung jedoch möglicherweise nicht in einer Zeile, oder auf einem Mobiltelefon mit einer niedrigeren Auflösung werden bereits 15 Zeichen angezeigt In diesem Fall bereitet es Kopfschmerzen, wenn das passiert.
Sehen wir uns zunächst an, wie man Zeilenumbrüche in eine einzelne Textzeile schreibt:

A20 Banana Pi Development Board Module - Deep Blue

CSS-Code

.title{   
    width: 150px;   
    height: 25px;   
    line-height: 25px;   
    overflow: hidden;   
    whitewhite-space: nowrap;   
    text-overflow: ellipsis;   
}

Demo
Das Obige Code gibt es schon seit langem. Ich glaube, jeder hat diese Schreibmethode in vielen Fällen verwendet.
Wie kann ich das Problem der mehrzeiligen Anzeige lösen? Nach einigem Googeln habe ich eine API von Chrome gefunden, die die oben genannten Anforderungen lösen kann. Leider wird diese API derzeit nur von Chrome unterstützt Es ist nicht im W3C-Standardumfang enthalten, was bedeutet, dass diese Funktion in Zukunft nur noch unter Chrome verwendet werden kann, was wirklich schade ist, aber jetzt verwenden mobile Endgeräte den Kernel von Webkit, sodass Sie beruhigt sein können Verwenden Sie die API Werfen wir oben einen Blick auf die Implementierung, z. B.:

A20 Banana Pi Development Board Module - Deep Blue

CSS-Code

.title{   
    width:150px;   
    overflow : hidden;   
    text-overflow: ellipsis;   
    display: -webkit-box;   
    -webkit-line-clamp: 2;   
    -webkit-box-orient: vertical;   
}

Demo

Das war's Ich hoffe, dass der gesamte Inhalt des Artikels für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Mit CSS den automatischen Zeilenumbruch reiner englischer Zahlen realisieren

Üben Sie, wie Sie CSS verwenden Behalten Sie die Breite des Seiteninhalts bei Kobi

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um zu lange Auslassungspunkte im Titeltext anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!