CSS-Implementierungsmethode zur Realisierung eines einzeiligen und mehrzeiligen Textüberlaufs und zur Anzeige von Ellipsen

Wenn Sie die Überlaufanzeige von Ellipsen 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 Partial kompatibel zu sein Durchsuchen

1. Einzelzeilenüberlauf

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

Implementierungscode:

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-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 Wir möchten die Überlaufanzeige von Auslassungspunkten für mehrzeiligen Text implementieren.

Als nächstes konzentrieren wir uns wie folgt auf die Anzeige von Ellipsen, wenn mehrzeiliger Text überläuft.

2. Mehrzeiliger Überlauf

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

Implementierungsmethode:

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

Der Effekt ist wie in der Abbildung dargestellt:


Anwendungsbereich:

Aufgrund der Verwendung der CSS-Erweiterungsattribute von WebKit eignet sich diese Methode für WebKit-Browser und mobile Endgeräte.

Hinweis:

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äufig kombinierte Attribute:
2.display: -webkit-box; Attribute, die kombiniert werden müssen, um das Objekt als flexibles Boxmodell anzuzeigen.
3.-webkit-box-orient muss mit dem Attribut kombiniert werden, um die Anordnung der untergeordneten Elemente des Flex-Box-Objekts festzulegen oder abzurufen.

Umsetzungsmethode:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}    
p::after{content: "..."; position: absolute; bottombottom: 0; rightright: 0; padding-left: 40px;    
background: -webkit-linear-gradient(left, transparent, #fff 55%);    
background: -o-linear-gradient(rightright, transparent, #fff 55%);    
background: -moz-linear-gradient(rightright, transparent, #fff 55%);    
background: linear-gradient(to rightright, transparent, #fff 55%);    
}

Anwendungsbereich:
Die 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.

Hinweis:

1. Stellen Sie die Höhe auf ein ganzzahliges Vielfaches der Zeilenhöhe ein, um zu verhindern, dass überschüssiger Text angezeigt wird.
2. Fügen Sie p::after einen Verlaufshintergrund hinzu, um zu verhindern, dass nur die Hälfte des Textes angezeigt wird.
3. Da ie6-7 keinen Inhalt anzeigt, müssen Sie Tags hinzufügen, um mit ie6-7 kompatibel zu sein (z. B. 45a2772a6b6107b401db3c9b82c049c2...d1bf6d6a16954ade8a6284a8272d757c); ie8, Sie müssen ::after durch :after ersetzen.

Script House-Editor hinzugefügt:

Der IE-Kernbrowser muss Zeilenhöhe und -höhe definieren, -webkit-line-clamp bedeutet beispielsweise ein paar Zeilen

Linienhöhe: 20px;

maximale Höhe: 40px;

Anzeige: -webkit-box;

-webkit- box-orient: vertikal;

-webkit-line-clamp: 2;

Überlauf: versteckt;

-webkit-line-clamp

-webkit-line-clamp ist eine nicht unterstützte WebKit-Eigenschaft, die nicht in der CSS-Entwurfsspezifikation erscheint.
Begrenzen Sie die Anzahl der in einem Blockelement angezeigten Textzeilen. Um diesen Effekt zu erzielen, muss es mit anderen fremden WebKit-Eigenschaften kombiniert werden. Häufig kombinierte Attribute:
display: -webkit-box; muss kombiniert werden, 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.
text-overflow kann verwendet werden, um bei mehrzeiligem Text Text außerhalb des zulässigen Bereichs mit den Auslassungspunkten „…“ auszublenden.

Das obige ist der detaillierte Inhalt vonCSS-Implementierungsmethode zur Realisierung eines einzeiligen und mehrzeiligen Textüberlaufs und zur Anzeige von Ellipsen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!