JavaScript zeigt den Ellipsis -Effekt an, nachdem der Container überschritten wird
In den tatsächlichen Projekten ist es aufgrund der Unsicherheit der Länge des Textinhalts und der Fixierung des Seitenlayouts unvermeidlich, dass der Textinhalt den Bereich Div (oder andere Tags, die gleiche unten) überschreitet. Der bessere Weg zu diesem Zeitpunkt ist es, es automatisch in einer Ellipse (…) anzuzeigen, wenn der Text die begrenzte Division überschreitet. Auf diese Weise werden die Leute nach Brauch wissen, dass es hier Texte gibt, die weggelassen werden. Es gibt eine Eigenschaft in CSS, die als Text-Overflow: Ellipsis bezeichnet wird; Sie können es beispielsweise mit CSS so schreiben:
{Breite: 27em; weißer Raum: Nowrap; Text-Overflow: Ellipsis; -O-Text-Overflow: Ellipsis; Überlauf: Versteckt;} Der Textüberlauf -Ellipse kann nicht allein im Firefox -Browser implementiert werden, und der Text wird direkt aus der Mitte fallen. Ich spreche nicht darüber, wie CSS verwendet werden soll, um dies zu implementieren. Die spezifische CSS -Implementierung kann auf Baidu verwendet werden. Das Wichtigste hier ist, wie man es mit JS implementiert und wie man eine einfache Komponente über JS schreibt. Ich kann die Initialisierungsmethode von JS direkt aufrufen, um sie zu implementieren! Zum Beispiel die folgenden Effekte:
Die Punkte und Punkte in der Rückseite fordern den Benutzer auf, dass mehr Inhalte angezeigt werden, die nicht angezeigt wurden, um einen solchen Effekt zu vervollständigen!
Sag zuerst weniger Unsinn! Schauen wir uns zunächst den Demo -Effekt an, den ich gemacht habe, und Sie werden verstehen, was es ist!
Wenn Sie den Effekt sehen möchten, klicken Sie bitte auf mich! OK?
1: Schauen wir uns zuerst die Konfigurationselemente der Komponenten an:
Zielcls
NULL, die erforderlichen Elemente für den Container, die vom Ziel abgefangen werden sollen, sind standardmäßig Null
LimitLinumum 1 ist die Anzahl der zu angezeigten Zeilen standardmäßig 1 Zeile
Geben Sie '...' ein, ein Typ, der die Containerlänge überschreitet, wird standardmäßig auf Ellipsis angezeigt
LineHeight 18 beträgt die Standardleitungshöhe des DOM -Knotens 18
IsShowtitle True, der Titel ist erforderlich, um alle Inhalte anzuzeigen. Der Standard ist wahr
ischarlimit falsche Grenzen, um Ellipse basierend auf der Länge des Zeichens anzuzeigen
MaxLength 20 Die Standardlänge beträgt 20. Die Ellipse wird nach Überschreitung des Zeichens 20 angezeigt.
Zwei: Analyse
1. Lassen Sie uns zunächst über diese Komponente sprechen: Unterstützen Sie zwei Möglichkeiten, Strings abzufangen. Erstens: Abfangen nach der Länge der Zeichen und zeigen Sie die Ellipse an, nachdem Sie sie überschritten haben. Zum Beispiel nenne ich es so:
Neue Multiellipsis ({{
"Zielcls": '.Text8',
"ischarlimit": wahr,
"MaxLength": 18
});
Die Initialisierung bedeutet auf diese Weise, dass Ischarlimit wahr ist, was bedeutet, mit der Anzahl der Zeichen abzufangen. Die maximale Länge maximal 18. Initialisierung auf diese Weise, da der Code zunächst feststellt, dass Ischarlimit zuerst entsprechend der Anzahl der Zeichen, wie dem folgenden Code, direkt abgefangen wird:
2. Der zweite Typ wird basierend auf der Anzahl der Zeilen und Höhen abgefangen. Beispielsweise beträgt die Zeilenhöhe des Standardkonfigurationselements 18. Wenn ich 2 Zeilen anzeigen möchte, dh die Höhe H = 18*2. Wenn die Höhe des Behälters 100 beträgt, lautet die Abschlussmethode:
Verwendung (100 - Typ Länge - 1), ob es größer als 18 × 2 ist, wenn es größer ist als weiter, ansonsten wird es nicht abfangen, und der Ellipsis -Effekt wird angezeigt! Der folgende Code:
Nachteile: Wenn Sie jedoch einen Hochreihenabschnitt verwenden, ist es in Ordnung, wenn die Daten relativ gering sind. Wenn jedoch viele Daten vorhanden sind, z. B. eine Höhe von 500 Pixel oder mehr, wirkt sich dies relativ auf die Leistung aus, da sie die n-malzeiten berechnen müssen (n bedeutet, dass es viele Funktionen gibt, die Schleifen rufen).
Alle JS -Codes sind wie folgt:
Kopieren Sie den Code
/ * * Multiellipsis basierend auf JS * @Author Tugenhua */ Funktion multiellipsis (Optionen) {var self = this; self.options = $ .extend ({}, Standardeinstellungen, Optionen || {}); self._init (); } $ .extend (multiellipsis.prototype, {// Page Initialisierung_init: function () {var self = this, cfg = self.options; if (cfg.targetCls == null || $ (cfg.targetcls + ") [0] ==== -und undmined) {if (fewn. leer! ");} return;} if (vgl. } self._comparHeight (cfg.lineHeight * cfg.limitLINENumber); if (text.length> cfg.maxLength) {var curtext = text.substring (0, cfg.maxLength); Der HTML -Inhalt direkt * @Method getText {public} */ getText: function () {var self = this, cfg = self.options; = cfg = self.options; "") [0]). HTML (Text); {self._deletetext (self.getText ()); - typelen - 1); self.options; var defaults = {'targetCls': null, // der Container, der durch die Ziele abgefangen werden soll. node'isshowtitle ': true, // Ob der Titel alle Inhalte standardmäßig ist.Die obige Methode zur Anzeige des Ellipsis -Effekts nach JavaScript überschreitet den Container (kompatibel mit einer Zeile oder mehreren Zeilen), der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.