Ich benötige ein Jquery-Skript, um einen Text Absatz für Zeile (nicht nach Anzahl der Zeichen) abzuschneiden.
Ich möchte einen gleichmäßig abgeschnittenen Textblock erreichen. Es sollte eine "mehr" und "weniger" Verknüpfung haben, um den Textabsatz zu erweitern und zu verkürzen. Mein Textabsatz ist wie folgt in ein div mit einer Klasse eingeschlossen:
%Vor%Die nächste Lösung, die ich auf SOF finden kann, ist die folgende (aber es ist für textarea Element und funktioniert nicht für mich): Begrenzung der Zeilenanzahl in textarea
Vielen Dank für irgendwelche Tipps. Ben
Für einen grundlegenden Ansatz könnten Sie sich die line-height CSS-Eigenschaft ansehen und diese in Ihren Berechnungen verwenden. Beachten Sie, dass dieser Ansatz keine anderen Inline-Elemente berücksichtigt, die größer als diese Höhe sind (z. B. Bilder).
Wenn Sie etwas fortgeschrittener sein möchten, können Sie die Informationen über jede Zeile mit getClientRects() function abrufen. Diese Funktion gibt eine Sammlung von TextRectangle -Objekten mit Breite, Höhe und Offset für jedes Objekt zurück.
Siehe diese Antwort hier für ein Beispiel (wenn auch ein nicht verwandtes Ziel), wie getClientRects() funktioniert.
Update, hatte ein bisschen Zeit, um zurück zu kommen und diese Antwort mit einem konkreten Beispiel zu aktualisieren. Es ist einfach, aber Sie bekommen die Idee:
Ein paar Hinweise:
Die von getClientRects zurückgegebene Sammlung ist statisch. Sie wird nicht automatisch aktualisiert, wenn sich die Abmessungen des übergeordneten Elements ändern. In meinem Beispiel funktioniert das, indem das Größenänderungs-Ereignis des Fensters erfasst wird.
Für einige merkwürdige Gründe für die Einhaltung von Standards, die ich nicht verstehe, muss das Element, das Sie getClientRects aufrufen, ein Inline-Element sein. Im Beispiel habe ich ein Container-Div mit dem Text in einem anderen Div innerhalb mit display: inline .
Ich habe diesen kleinen jQuery-Code erstellt, mit dem ich Text blockweise (über CSS-Klassen) abschneiden kann. Sie können ihn gerne verwenden und kommentieren.
Hier ist das jsFiddle , das auch Funktionen zum Abschneiden von Zeichen oder Wörtern enthält Anzahl. Sie können sehen, dass derzeit die Größe des Fensters wird nicht aktualisiert die Blockanzeige, ich arbeite daran.
%Vor%Wenn Sie eine Schriftart mit einem festen Abstand verwenden, haben Sie eine Chance auf diese Funktion, da Sie eine gute Vorstellung davon haben, wie viele Buchstaben auf jede Zeile für ein Element mit einer definierten Breite passen. Wenn jedoch ein Wort die Zeilen durchbricht, kann das schwierig werden.
e: Ich habe eine andere Frage gefunden, nach der Sie suchen. Sie hatten auch keine richtige Auflösung, aber meiner Meinung nach scheinen die Höhe und Höhe der Elemente am nächsten zu sein.
"Wie kann ich zählen? Textzeilen innerhalb eines dom-Elements "
Ich habe ein kleines Modul erstellt, das mit reinem Textinhalt arbeitet, keine verschachtelten Tags und kein CSS-Padding auf dem texthaltigen Element ist erlaubt (aber diese Funktionalität könnte einfach hinzugefügt werden).
Das HTML:
%Vor%Das Javascript / Jquery:
%Vor%Ich hoffe es gefällt euch!
tl; dr - Legen Sie eine Höhe für Ihr Container-div fest und verwenden Sie dann das jQuery dotdotdot-Plugin
War im Begriff, @Andy Es fantastisches Beispiel in ein Plugin zu verwandeln, aber dann erkannte Ссылка das. Unser Anwendungsfall ist, dass wir eine Zeile auf Desktop-Breiten und zwei Zeilen auf Handy / Tablet zeigen möchten.
Unser CSS wird das Container-div einfach auf das Äquivalent von einer oder zwei Zeilenhöhe setzen, und dann scheint das dotdotdot-Plugin den Rest zu verarbeiten.
Tags und Links javascript jquery