Ich habe einige Module in meinem Projekt, die dynamisch generiert werden. Dieser einfache HTML-Code funktioniert gut als Beispiel für das, was ich erreichen möchte:
%Vor%Mein Problem ist, dass ich nicht möchte, dass dieses Modul jemals zu stark vertikal wächst, wenn der Web-Administrator eine lange "Beschreibung" schreibt (ich kann nicht begrenzen, wie viel er schreiben will, wie der "Beschreibungs" -Text) auf anderen Seiten anzeigen).
Ich habe einen netten CSS-Trick gefunden, um "Ellipse" zu einem Container mit mehreren Zeilen hinzuzufügen. Hier sehen Sie diesen "Trick" in .ellipsis (plus dem grundlegenden CSS):
Sie können alles hier zusammen sehen: JSFIDDLE
Das Problem, das ich habe, ist, dass während die Ellipse funktioniert, ich nicht will, dass ALLE Module eine feste Höhe haben. Ich möchte nur die maximale Höhe auf eine feste Größe beschränken. (Löschen Sie einfach "Höhe: 200px;" von ".ellipsis: before", um zu sehen, was ich erreichen möchte.)
Das Problem ist also die .ellipsis:before fixed height. 100% height funktioniert nicht, wenn ich die Position nicht auf absolut stelle, aber dann funktioniert der "Ellipse" -Trick nicht, da der Float nicht wirksam wird.
Jede Hilfe bei meinem Problem wird sehr geschätzt. Ich glaube nicht, dass es eine reine CSS-Lösung gibt, (vertrau mir, ich habe es ausprobiert) und ich bin sehr schlecht ein JavaScript / jQuery. Wenn Sie jedoch eine jQuery-Lösung haben, die Ihnen helfen könnte, könnte ich sie im Projekt implementieren (und Ihnen hier nette Rep-Punkte geben :)). Ich dachte so etwas wie:
Wenn div.ellipsis & gt; 200px dann Höhe hinzufügen: 200px zu Ellipse: vor
Vielen Dank im Voraus und bitte entschuldigen Sie mein schlechtes Englisch. Hoffe, die Frage ist klar genug.
Es ist keine :before Pseudoklasse erforderlich. Überprüfe diese Geige.
In der obigen Geige habe ich die Pseudo-Klasse :before entfernt und die Position der Pseudo-Klasse :after nach oben um 200px gesetzt, was gleich dem gegebenen max-height -Wert von .ellipsis ist.
und um die oberen und unteren Standardlücken des Containers zu entfernen, habe ich margin-top: -25px hinzugefügt, was gleich der gegebenen line-height ist.
Hinweis: Sie können nur top: 175px anwenden, was der Ergebniswert der Subtraktion von gegebenen max-height und line-height Werten ist.
Hier ist eine einfache jQuery-Lösung.
Fügen Sie zuerst eine Klasse hinzu, wenn ein ellipsis die maximale Höhe erreicht, nennen wir es maxed . Setze die :before height dafür auf 200px :
Dann wie du sagst. Sie können einige einfache jQuery verwenden, um die Höhe zu überprüfen. Wenn es das Maximum ist, dann füge unsere maxed -Klasse zu ellipsis :
Sie können es leicht mit jquery machen (ich nehme an, dass jquery eine verfügbare Option in Ihrem Projekt ist).
Sie müssen nur
Entfernen Sie alle "Ellipsen" -Klassen von HTML
Fügen Sie bei Bedarf mit JS "Ellipsen" hinzu (= wenn Ihr Inhalt 200px überschreitet).
Dafür können Sie Folgendes verwenden:
%Vor% Sie können Pseudoelemente wie: vorher nicht direkt manipulieren. Was Sie hier tun könnten, ist eine Klasse für große Ellipsen mit height: 200px hinzuzufügen. Verwenden Sie dann jQuery, um die neue Klasse entsprechend der Höhe hinzuzufügen.
Siehe das Code-Snippet für das vollständige Beispiel:
Tags und Links javascript html jquery css