CSS-Methode zur Lösung des Problems, dass die Anzahl der Textwörter die Anzeige von Auslassungspunkten überschreitet ... (einzeiliger, mehrzeiliger Text)

Wenn Sie die Überlaufanzeige von Ellipsen in einer einzelnen Textzeile realisieren möchten, sollten alle Schüler wissen, wie man text-overflow:ellipsisattribute verwendet , und natürlich müssen Sie die Breite erhöhenwidth Attribut ist mit teilweisem Durchsuchen kompatibel.

Implementierungsmethode:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

Der Effekt ist wie gezeigt:

Aber dieses Attribut unterstützt nur die Überlaufanzeige von Ellipsen für einzeiligen Text Wir möchten mehrzeiligen Text implementieren. Überlauf zeigt Ellipsen.

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

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 dies Die Methode eignet sich 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. Gemeinsame Kombinationsattribute:

2.display: -webkit-box; Attribute, die kombiniert werden müssen, zeigen das Objekt als elastisch skalierendes Boxmodell an.

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; 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:
Anwendbarer Anwendungsbereich:
Diese Methode hat ein breites Anwendungsspektrum, aber sie ist funktioniert auch, wenn der Text die Zeile nicht überschreitet. Wenn Auslassungspunkte angezeigt werden, kann diese Methode mit js optimiert werden.

Hinweis:

1. Stellen Sie die Höhe auf das Ganzzahlfache 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. …); Bei ie8 müssen Sie ::after durch :after ersetzen.

[Verwandte Empfehlungen]

1. So steuern Sie die Anzahl der im HTML-Text angezeigten Zeichen mithilfe von Auslassungspunkten, wenn die Anzahl der Zeichen den Grenzwert überschreitet

2.

Verwenden Sie CSS, um das Problem der Titelanzeige zu lösen. Möglichkeiten, die Wortanzahl zu überschreiten

3.

Kostenlose Online-CSS-Video-Tutorials

Das obige ist der detaillierte Inhalt vonCSS-Methode zur Lösung des Problems, dass die Anzahl der Textwörter die Anzeige von Auslassungspunkten überschreitet ... (einzeiliger, mehrzeiliger Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!