So implementieren Sie CSS, um Auslassungspunkte anzuzeigen, wenn einzeiliger oder mehrzeiliger Text überläuft

1. Einreihiger Überlauf

1. Wenn eine einzelne Zeile überläuft, wird der überschüssige Teil angezeigt ... oder abgefangen. Die Prämisse muss Breite sein.
CSS: {width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}, als Clip abgefangen;

Implementierungscode:

Breite: 300px;    
Überlauf: versteckt;    
Textüberlauf: Auslassungspunkte;    
weißer Weißraum: Nowrap;

Der Effekt ist wie unten dargestellt:


Diese Eigenschaft unterstützt jedoch nur die Anzeige von Auslassungspunkten für den Überlauf von einzeiligem Text. Was ist, wenn wir Auslassungspunkte für den Überlauf von mehreren Textzeilen anzeigen möchten?

Als Nächstes konzentrieren wir uns auf die Anzeige von Auslassungspunkten bei Überlauf von mehrzeiligem Text, wie folgt.

2. Mehrzeiliger Überlauf

{Anzeige:-webkit-box;Überlauf:versteckt;Textüberlauf:Ellipse;-webkit-line-clamp:2;-webkit-box-orient:vertikal;}

Implementierungsmethode:

Anzeige: -webkit-box;    
-webkit-box-orient: vertikal;    
-Webkit-Leitungsklemme: 3;    
Überlauf: versteckt;

Der Effekt ist wie unten dargestellt:


Geltungsbereich:

Da die erweiterten CSS-Eigenschaften von WebKit verwendet werden, ist diese Methode auf WebKit-Browser und Mobilgeräte anwendbar.

Notiz:

1.-webkit-line-clamp wird verwendet, um die Anzahl der in einem Blockelement angezeigten Textzeilen zu begrenzen. Um diesen Effekt zu erzielen, muss es mit anderen WebKit-Eigenschaften kombiniert werden. Häufige Kombinationseigenschaften:
2.display: -webkit-box; Dies muss mit der Eigenschaft kombiniert werden, um das Objekt als elastisches Boxmodell anzuzeigen.
3.-webkit-box-orient muss mit der Eigenschaft kombiniert werden, um die Anordnung der untergeordneten Elemente des Teleskopboxobjekts festzulegen oder abzurufen.

Implementierungsmethode:

p{Position: relativ; Zeilenhöhe: 20px; maximale Höhe: 40px; Überlauf: versteckt;}    
p::nach{Inhalt: "..."; Position: absolut; untenunten: 0; rechtsrechts: 0; Polsterung links: 40px;    
Hintergrund: -webkit-linear-gradient (links, transparent, #fff 55 %);    
Hintergrund: -o-linear-gradient(rechtsrechts, transparent, #fff 55%);    
Hintergrund: -moz-linear-gradient (rechtsrechts, transparent, #fff 55 %);    
Hintergrund: linearer Farbverlauf (nach rechts, transparent, #fff 55 %);    
}

Geltungsbereich:
Diese Methode hat ein breites Anwendungsspektrum, aber Auslassungspunkte werden angezeigt, wenn der Text die Zeile nicht überschreitet. Diese Methode kann in Kombination mit js optimiert werden.

Notiz:

1. Stellen Sie die Höhe auf ein Vielfaches der Zeilenhöhe ein, um zu verhindern, dass Text angezeigt wird, der die Höhe überschreitet.
2. Das Hinzufügen eines Hintergrunds mit Farbverlauf zu p::after kann verhindern, dass der Text nur zur Hälfte angezeigt wird.
3. Da IE6-7 keinen Inhalt anzeigt, müssen Sie Tags hinzufügen, um mit IE6-7 kompatibel zu sein (z. B.: <span>…<span/>); um mit IE8 kompatibel zu sein, müssen Sie ::after durch :after ersetzen.

Der 123WORDPRESS.COM-Editor fügt hinzu:

IE-basierte Browser müssen Zeilenhöhe und Höhe definieren, und -webkit-line-clamp bedeutet beispielsweise einige Zeilen

Zeilenhöhe: 20px;

maximale Höhe: 40px;

Anzeige: -webkit-box;

-webkit-box-orient: vertikal;

-Webkit-Leitungsklemme: 2;

Überlauf: versteckt;

-WebKit-Leitungsklemme

-webkit-line-clamp ist eine nicht unterstützte WebKit-Eigenschaft, die nicht im CSS-Spezifikationsentwurf erscheint.
Begrenzt die Anzahl der in einem Blockelement angezeigten Textzeilen. Um diesen Effekt zu erzielen, müssen andere exotische WebKit-Eigenschaften kombiniert werden. Häufige Kombinationseigenschaften:
Anzeige: -webkit-box; ist ein erforderliches Attribut, das das Objekt als elastisches Boxmodell anzeigt.
-webkit-box-orient muss mit der Eigenschaft kombiniert werden, um die Anordnung der untergeordneten Elemente des Flexbox-Objekts festzulegen oder abzurufen.
Mit text-overflow kann bei mehrzeiligen Texten der Text ausgeblendet werden, der den Bereich mit Auslassungspunkten „…“ überschreitet.