Beginnen wir ohne weitere Umschweife mit dem Code!
1. Zeigen Sie nur eine Textzeile an und blenden Sie sie dann aus und lassen Sie sie weg
// Nur eine Textzeile anzeigen und dann .element { weglassen
width: 300px; /* Es muss eine feste Breite festgelegt werden */
white-space: nowrap; /* Einzeilige Anzeige ohne Zeilenumbruch erzwingen */
Überlauf: versteckt; /* Den Teil außerhalb der Box ausblenden */
text-overflow: ellipse; /* Überzählige Ellipsen anzeigen */
}2. Zeigen Sie die angegebene Anzahl von Textzeilen an und blenden Sie sie dann aus und lassen Sie sie weg.
// Nach der Anzeige von mehrzeiligem Text weglassen.element {
width: 300px; /* Es muss eine feste Breite festgelegt werden */
display: -webkit-box; /* Flexibles Box-Layout verwenden */
-webkit-box-orient: vertikal; /* vertikale Anordnung */
-webkit-line-clamp: 3; /* Drei Zeilen anzeigen */
Überlauf: versteckt; /* Den Teil außerhalb der Box ausblenden */
text-overflow: ellipse; /* Überzählige Ellipsen anzeigen */
} Mehrzeiliger Text wird weggelassen, indem display: -webkit-box; flexibles Boxlayout und -webkit-line-clamp verwendet werden, um eine mehrzeilige Textkürzung zu erreichen.
Hinweis: Diese Methode eignet sich für WebKit-Kernbrowser (wie Chrome, Safari usw.). Für andere Browser ist möglicherweise zusätzliche Polyfill-Unterstützung erforderlich.
Andere Lösungen
1. Verwenden Sie JavaScript, um die Höhe des Textinhalts dynamisch zu berechnen und ihn zu kürzen.
2. Verwenden Sie vorhandene Bibliotheken: wie zum Beispiel: Clamp.js
Clamp.js: Eine leichtgewichtige Bibliothek für die browserübergreifende mehrzeilige Textkürzung.
//Einzelne Zeile $clamp(myHeader, {clamp: 1});
//Mehrere Zeilen $clamp(myHeader, {clamp: 3});
//Berechnen Sie automatisch die Anzahl der Zeilen basierend auf der verfügbaren Höhe $clamp(myParagraph, {clamp: 'auto'});
//Berechnen Sie automatisch die Anzahl der Zeilen basierend auf der festen Höhe $clamp(myParagraph, {clamp: '35px'}); 3. CSS-Fallback (Teilkompatibilitätslösung)
Für einige Browser gibt es zwar keine direkte Unterstützung für -webkit-line-clamp , wir können es jedoch mit etwas einfachem CSS kombinieren, um einen ungefähren Effekt zu erzielen.
.element {
display: block; /* Als Block anzeigen */
Überlauf: versteckt; /* Überschüssigen Inhalt ausblenden */
text-overflow: ellipse; /* Überzählige Ellipsen anzeigen */
Zeilenhöhe: 1,5em; /* Zeilenhöhe festlegen */
max-height: 4,5em; /* Maximale Höhe von 3 Zeilen, 3 Zeilen * 1,5 Zeilen hoch = 4,5em */
Leerzeichen: normal; /* normalen Textumbruch beibehalten */
}Obwohl dieses Schema nicht in allen Fällen eine präzise mehrzeilige Kürzung erreichen kann, eignet es sich dennoch zur Unterstützung der grundlegenden mehrzeiligen Textauslassungsanzeige.
Damit ist dieser Artikel über das Ausblenden und Anzeigen von Ellipsen, nachdem CSS-Text den Grenzwert überschreitet, und andere Browserkompatibilitätslösungen abgeschlossen. Weitere verwandte CSS-Texte, die den ausgeblendeten Inhalt überschreiten, finden Sie in früheren Artikeln auf downcodes.com oder durchsuchen Sie weiter unten die entsprechenden Artikel Ich hoffe, dass Sie downcodes.com in Zukunft stärker unterstützen werden!