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

Dieser Artikel stellt hauptsächlich die Implementierungsmethode für einzeilige und mehrzeilige Textüberlaufanzeigen in CSS vor. Jetzt kann ich ihn mit Ihnen teilen.

Wenn es implementiert ist, sollten alle Schüler wissen, dass der Überlauf einer einzelnen Textzeile mithilfe des text-overflow:ellipsis-Attributs Ellipsen anzeigt. Natürlich muss das width-Attribut hinzugefügt werden, um mit teilweisem Durchsuchen kompatibel zu sein

1. Einzelzeilenüberlauf

1. Eine einzelne Zeile läuft über und 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 gezeigt :

Aber dieses Attribut unterstützt nur die Überlaufanzeige von Ellipsen in einer einzelnen Textzeile. Was ist, wenn wir die Überlaufanzeige von Ellipsen in mehrzeiligem Text implementieren möchten?
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 gezeigt:

Anwendbarer Bereich:

Aufgrund der Verwendung der erweiterten CSS-Attribute von WebKit ist diese Methode für WebKit-Browser und mobile Endgeräte geeignet.
Hinweis:
1.-webkit-line-clamp wird zur Einschränkung verwendet die Anzeige eines Blockelements. Die Anzahl der Textzeilen. 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.

Implementierungsmethode:

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%);    
}

Anwendbarer Bereich:
Diese Methode hat ein breites Anwendungsspektrum, aber Ellipsen werden auch angezeigt, wenn der Text die Zeile nicht überschreitet und kann mit js kombiniert werden. Optimieren Sie diese Methode.

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 vermeiden, 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. ...); 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 Text außerhalb des Bereichs mit Auslassungspunkten „…“ auszublenden, wenn mehrzeiliger Text verwendet wird.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So richten Sie CSS-Symbole an Text aus

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!