Ich habe eine Liste von divs , in der ich die Vorschau von längeren Dokumenten anzeigen kann. Die Dokumente verwenden unterschiedliche Schriftarten. Ich habe also keine konstante Zeilenhöhe. Hier ist ein Beispiel: Ссылка
Ich muss nur die ersten Zeilen jedes Dokuments anzeigen. Wir haben festgestellt, dass 300px ungefähr richtig ist. Wenn ich einfach einen max-height von 300px auf die divs setze, wird abhängig von den Texteigenschaften (Größe, Abstand, Rand) der untere Teil der letzten Zeile abgeschnitten.
Wie kann ich max-height für jeden Block einstellen, der nahe bei 300px liegt, aber kein Clipping verursacht?
Die Lösung kann CSS, Javascript und jQuery verwenden.
Diese beiden Fragen sind ähnlich, aber ihre Lösungen nehmen eine konstante Zeilenhöhe an.
Der Algorithmus zur perfekten Berechnung aller Faktoren mit nur Javascript wäre zu komplex.
Mit css3 gibt es eine Zeilenklammer
Aber das funktioniert nur mit modernen Browsern.
%Vor%DEMO
Damit können Sie die Anzahl der Zeilen festlegen, die angezeigt werden sollen, bevor Sie die 3 Punkte hinzufügen.
jetzt willst du 300px ... so:
%Vor%Dies gibt Ihnen ein Element, das 300px oder weniger ist
DEMOS
BENÖTIGTE WERTE: line-height
Nun, wenn Sie die Box genau 300px Höhe machen wollen, fügen Sie einfach Ränder oder Abstände zu den Absätzen hinzu. Aber das hängt von Ihren Einstellungen ab.
Wenn Sie Fragen haben, fragen Sie einfach.
Hinweis
Jede js-Funktion, die am Ende 3 Punkte addiert, indem die Wörter berechnet werden, wäre für die Verwendung auf einer realen Website zu intensiv.
Ein besserer Ansatz wäre, jeden Absatz einmal zu berechnen und das geklammerte Ergebnis zu einem db hinzuzufügen oder es auf der statischen Website zu speichern.
aber dann wieder jeder Browser zeigt Schriftarten auf andere Weise.
BEARBEITEN
Hier ist eine andere Möglichkeit, um partiellen Inhalt anzuzeigen.
Verwenden von max-height & amp; -webkit-column-count
DEMO
Die Unterstützung ist etwas höher als line-clamp und Sie können nicht den gesamten Inhalt anzeigen.
EDIT2
Bild unten ausblenden.
%Vor%EDIT3
fading Bild alte Browser (verwenden Sie echte Bilder Links, nicht base64)
Eine Alternative ist das dotdotdot jQuery-Plugin.
Es wird wie
verwendet %Vor%Auf diese Weise können Sie sich nur mit den div-Dimensionen und nicht mit der Zeilenhöhe oder anderen CSS-Attributen befassen. Außerdem können Sie Ereignisse auslösen, um den verborgenen Text anzuzeigen und auszublenden.
Sie sollten nach Linienklemmtechniken suchen
Eine Liste von ihnen finden Sie hier Ссылка
Wie Sie sehen, erklärt der obige Link verschiedene Methoden, um eine Zeilenklammerung zu erreichen, aber nur eine von ihnen ist wirklich eine Cross-Browser-Lösung. Es scheint eine JavaScript-Bibliothek zu geben, die dieses Problem genau löst, und es funktioniert auch, wenn Sie verschiedene Schriftgrößen oder Stile verwenden
Clamp.js [ Ссылка ]
Hier ist ein Beispiel
%Vor%Sie könnten definitiv Clamp.js verwenden, welches ein JavaScript-Plugin ist, das von Joseph Schmitt erstellt wurde. Die verkleinerte Version des Codes finden Sie hier .
Sie könnten es dann so verwenden:
%Vor% Alternativ können Sie getElementsByClassName verwenden, wenn nicht alle Ihre <div> s benötigt werden.
Hier, was ich in diesem Fall tun würde;
Zuerst müssen wir das div holen und die Zeilenhöhe herausfinden, also gehe ich davon aus, dass Sie Ihr div als jQuery-Objekt erhalten haben.
%Vor%Etwas ähnliches sollte Ihren Fall beheben, aber es könnte einige Ausnahmen wie den Rand des div geben, ich bin nicht sicher, ob $ cloneDiv.height () sie enthält oder nicht.
auch, wenn es ein anderes Element (wie span) in Ihrem div mit verschiedenen CSS gibt, die auch die Situation ändern wird.
Hoffe, das hilft.
Tags und Links javascript html jquery css