So implementieren Sie das Ausblenden von Überläufen in CSS: 1. Fügen Sie dem Element den Stil „overflow:hidden;“ hinzu und stellen Sie ihn so ein, dass der Überlaufteil gekürzt und ausgeblendet wird. 2. Fügen Sie „text-overflow“ hinzu : ellipsis;" zum Element. Stil, der zugeschnittene Inhalt (versteckter Inhalt) kann durch das Auslassungszeichen „..." dargestellt werden.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wenn Sie die Überlaufanzeige von Auslassungspunkten in einer einzelnen Textzeile realisieren möchten, sollten Sie alle das Attribut text-overflow:ellipsis verwenden. Natürlich müssen Sie auch das Attribut width hinzufügen, um mit einigen Browsing-Funktionen kompatibel zu sein .
Implementierungsmethode:
overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
Der Effekt ist wie in der Abbildung dargestellt: 
Aber dieses Attribut unterstützt nur die Überlaufanzeige von Auslassungspunkten für eine einzelne Textzeile mehrzeiliger Text.
Als nächstes konzentrieren wir uns wie folgt auf die Überlaufanzeige von Ellipsen in mehrzeiligem Text.
Implementierungsmethode:
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
Der Effekt ist wie gezeigt: 
Anwendungsbereich:
Aufgrund der Verwendung der CSS-Erweiterungsattribute von WebKit ist diese Methode für WebKit-Browser und mobile Endgeräte geeignet;
Hinweis:
-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äufig kombinierte Attribute:
display: -webkit-box; Attribute, die kombiniert werden müssen, um das Objekt als flexibles Boxmodell anzuzeigen.
-webkit-box-orient muss mit dem Attribut kombiniert werden, um die Anordnung der untergeordneten Elemente des Flex-Box-Objekts festzulegen oder abzurufen.
Implementierungsmethode:
p{position: relative; line-height: 20px;
max-height: 40px;
overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0;
padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);}Der Effekt ist wie in der Abbildung dargestellt: 
Anwendungsbereich:
Diese Methode hat ein breites Anwendungsspektrum, es werden jedoch auch Ellipsen angezeigt, wenn der Text die Zeile nicht überschreitet . Diese Methode kann mit js optimiert werden. [Empfohlenes Lernen: CSS-Video-Tutorial]
Hinweis:
Stellen Sie die Höhe auf ein ganzzahliges Vielfaches der Zeilenhöhe ein, um zu verhindern, dass überschüssiger Text angezeigt wird.
Fügen Sie p::after einen Hintergrund mit Farbverlauf hinzu, um zu vermeiden, dass nur die Hälfte des Textes angezeigt wird.
Da ie6-7 keinen Inhalt anzeigt, müssen Sie Tags hinzufügen, um mit ie6-7 kompatibel zu sein (z. B. ...); um mit ie8 kompatibel zu sein , müssen Sie ::after durch :after ersetzen.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Ausblenden von Überläufen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
