Dies ist ein Beispiel :
%Vor% Dieses div ist 200px breit, und ich muss die letzte Zeile, die ich im Browser sehen kann, abfangen und sie mit einem Span umwickeln. Wie <span>it over 2000 years old.</span> in meinem Fall.
Ist das mit jquery / javascript möglich? Oder zumindest die Länge dieser "letzten" Zeile.
EDIT: Ich denke, ich finde einen guten Weg: Ссылка
Das funktioniert. Geht Wort für Wort durch Berechnen der Breite
%Vor%Dies ist wahrscheinlich ein bisschen mehr Hardcore, als Sie gehofft haben, aber Sie könnten die Höhe des Elternteils überprüfen und anfangen, Wort für Wort zu entfernen, indem Sie jede Iteration überprüfen, bis sich die Höhe ändert. Dann wissen Sie, an welchem Wort oder Symbol die letzte Zeile beginnt.
%Vor% Ich gehe davon aus, dass Sie das tun, um den Text irgendwie zu stylen, derzeit gibt es einen Pseudo-Selektor namens first-line , der auf die erste Textzeile des Selektors abzielt, was wir jedoch noch nicht gesehen haben ein last-line oder nth-line(#) Selektoren, was eine Schande ist, wie es scheint, eine ziemlich vernünftige Sache zu haben.
Sie können document.caretPositionFromPoint dafür verwenden, wenn Sie die Zeilenhöhe des Textes im Container kennen oder annähern können. Hier ist eine Beispielgeige: Ссылка
Die Funktion erlaubt uns im Grunde, die Offset-Position von Text für jedes Element an den gegebenen Koordinaten zu erfassen, und dann verwenden wir ein einfaches String-Slicing für die Eigenschaft textContent des Elements. Wir verwenden dies, um die Position des Punktes zu erhalten, der nur vor den benötigten Text enthält und den Offset erhält.
Diese Lösung ist auch recht freundlich zur DOM-Performance, da wir keine neuen Elemente einfügen oder die bereits existierenden Elemente mutieren.
Ich hoffe, das hilft.
Bearbeiten: Sie haben gerade gesehen, dass Sie die letzte Zeile in einem Bereich umbrechen möchten. Dies können Sie folgendermaßen tun: Ссылка
Es teilt den Textknoten auf und ersetzt den Ersatz durch ein umgebrochenes Element.
Hier ist der Code:
%Vor% Zu diesem Zweck müssen Sie alle Arbeiten in Text mit Javascript split Methode erhalten. Fügen Sie dann jedes Wort zum Element hinzu und rufen Sie das Element height ab. Wenn die Elementhöhe die erste Höhe des Elements erreicht, bedeutet dies, dass dieses Wort in der letzten Zeile steht. Siehe mein Beispiel
Wenn Sie diese Arbeit mit reinem JavaScript durchführen möchten, sehen Sie jsfiddle
Tags und Links javascript jquery