Vorwort
Diese Situation wird während der Entwicklung auftreten. Es werden nur zwei Zeilen angezeigt. Wenn mehr als zwei Zeilen überschritten werden, wird eine Schaltfläche "More anzeigen" angezeigt. Klicken Sie auf die Schaltfläche, um den Inhalt der verbleibenden Zeilen anzuzeigen. Es gibt ein JQuery -Plugin loadingDots das diese Funktion spezifisch implementiert. Heute werden wir native JavaScript verwenden, um diese Anforderung zu implementieren. Um diese Anforderung zu erreichen, ist das Wichtigste, die Anzahl der Textzeilen in diesem Container zu bestimmen. Ändern Sie nach Erhalt der Anzahl der Zeilen die Elementhöhe und bestimmen Sie, ob die Ladetaste angezeigt wird.
window.getComputedStyle ()
Um den nativen JavaScript -Code zu verwenden, um die individuellen Stileigenschaften eines Elements zu erhalten, ist es unvermeidlich, window.getComputedStyle() zu verwenden. Es kann die Stile eines HTML -Elements zurückgeben, wenn es tatsächlich im Browser angezeigt wird - natürlich werden einige Stile vom Browser blockiert. Wenn Sie beispielsweise die Farbe eines Links erhalten und bereit sein möchten, zu beurteilen, ob der Benutzer eine bestimmte Adresse durch Farbe besucht hat, ist dies definitiv nicht möglich.
Die Methode gibt ein Style-Schlüsselwertpaar zurück, das eine Instanz der CSSStyleDeclaration ist. Die Indexnamen jedes Attributs haben nicht - und die Kamel -Nomenklatur wird übernommen. Zum Beispiel lineHeight .
Anzahl der Zeilen = Gesamthöhe/Linienhöhe
Die Gesamthöhe kann durch Höhe erhalten werden. Die Zeilenhöhe kann durch lineHeight erhalten werden, und das Ergebnis ist abgerundet, um die Anzahl der Zeilen zu erhalten.
Es gibt jedoch ein Problem, wenn line-height für ein Element nicht festgelegt ist, ist der Standardwert normal , was normalerweise 1,2 in Desktop-Browsern beträgt, aber auch mit Schriftarten zusammenhängt. Daher ist es am besten, line-height für Elemente festzulegen, die die Anzahl der Zeilen berechnen müssen.
Eine einfache Implementierung ist wie folgt:
Funktion countlines (ele) {var styles = window.getComputedStyle (ele, null); var lh = parseInt (styles.lineHeight, 10); var h = parsesint (styles.height, 10); var lc = math.round (h / lh); console.log ('Linienzahl:', lc, 'linieheight:', lh, 'Höhe:', h); return lc;}Vollständiger Codebeispiel
<! DocType html> <html> <kopf> <titels> Zeilenzahl </title> <style type = "text/css"> p {Zeilenhöhe: 1.3EM; } </style> <meta http-äquiv = "content-type" content = "text/html; charset = gb2312"> </head> <body> <p id = "target"> Sie hat gerade ein Baby aussehen lassen. Alles ist weiß und sie hat immer einen frischen Blaubeerkuchen, der dampft und schottet und creme geschlossen ist. Es ist unglaublich und ich fand das schön. Mein Kind ist wie mit explosiven Geräten zu spielen. Ich weiß nicht, wo sie sie gefunden hat, als würde sie sie in das Ohr unseres Hundes stecken. Sie weiß bereits, wie man die Mauer trocknen kann, weil sie Löcher in die Mauer steckt. die Tasche. " Cheng Yawen, Professor an der School of International Relations and Public Affairs der Shanghai Foreign Studies University, wies in seinem neuen Buch "Strategic Mächte of Great Mächte" darauf hin, dass viele Menschen in China nun in der Illusion von "Wohlstand" gefangen sind und nicht, dass China hinter der Gesamtwirtschaftsleistung tatsächlich ein äußerstes Land ist. Es gibt kein großes Land auf der Welt, das in einer ruhigen und friedlichen Situation entstanden ist, und Chinas neue Runde der Zivilisation wird auch voller Risiken und Wendungen sein. Das Verhinderung eines Landes, des Zerfalls oder des Niedergangs sollte die oberste Priorität der nationalen Strategie Chinas haben. Das Vertiefung von "sanftem Glück" wird nur ein Land verwundbar machen. </p> <p> Anzahl der Zeilen: <span id = "dusch"> </span> </p> Ändern Sie die Fenstergröße und berechnen Sie automatisch. window.getComputedstyle (ele, null); var lh = parseInt (styles.lineHeight, 10); var h = parsesint (styles.height, 10); var lc = math.round (h / lh); console.log ('Linienzahl:', lc, 'linieheight:', lh, 'Höhe:', h); return lc;} Funktion change () {dusch.innerhtml = countlines (Ziel);} Fenster.onResize = Änderung; change (); </script> </body> </html> [/html]Zusammenfassen
Das obige dreht sich alles um diesen Artikel. Ich hoffe, der Inhalt dieses Artikels wird für alle hilfreich sein, die JavaScript verwenden. Wenn Sie Fragen haben, überlassen Sie bitte eine Nachricht, um zu diskutieren.