Erkennen von Zeilenumbrüchen mit jQuery?
ist es möglich, jQuery/javascript erkennen, wo ein string ist unterbrochen (um fit in CSS Breite-Einschränkungen), sodass das einfügen von DOM-Elementen vor dem Beginn einer neuen Zeile?
Kommentar zu dem Problem
Sind Sie auf der Suche nach, wo ein Wort umgebrochen wird, oder sind Sie auf der Suche nach
<br>
? welche Art von string ist der Eingang?
Was ist der Inhalt, den du einfügen vor dem Anfang jeder Zeile?
@Marnix der Suche nach dem wickeln. @amosrivera nur ein Satz, es ist eine überschrift. @Jacob nicht sicher, was du meinst? vor dem dynamischen Inhalt ist ein <h3> und eine <span>
InformationsquelleAutor der Frage Mild Fuzz | 2011-01-12
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich kam mit einem Konzept, aber es wäre des guten zuviel, für Ihre Zwecke, so berücksichtigen Sie dies.
Müssen Sie erstellen Sie ein Klon von dem element, leer, das original, dann verschieben Sie word zurück in das ursprüngliche element. Wenn sich die Höhe ändert sich bei jedem Punkt, gibt es einen Zeilenumbruch vor, das Wort. Das wäre ziemlich einfach zu tun, mit
$(el).text()
, aber es wird komplizierter, wenn es anderen tags innerhalb, nicht nur text. Ich habe versucht zu erklären, wie, um es zu brechen, die von Knoten in diese Antwort-box, aber fand es einfacher, nur um ein jQuery-plugin in ein jsFiddle. Hier der Link: http://jsfiddle.net/nathan/qkmse/ (Gist).Es wird nicht mit gefloateten Elementen alles, was gut, und es gibt ein paar andere Situationen, wo Sie Umfallen. Lassen Sie mich wissen, wenn Sie möchten, mehr Optionen, oder, wenn es nicht ganz der Arbeit für Ihre Zwecke, oder wenn Sie nicht sicher sind, wie Sie es anwenden und ich werde versuchen zu helfen.
InformationsquelleAutor der Antwort Nathan MacInnes
Ist hier ein Ansatz. Hinweis: ich sehe nicht, eine ideale Lösung ohne Verwendung von monospace-Schriftarten. Das gleiche mit den Charakteren machen diese Aufgabe viel einfacher.
Haben Sie einen Blick auf die jsfiddle für zugehörige html. Ich habe nicht abgeschlossen mit dieser Funktion. Mehr Kontrollen sind erforderlich, um bei der Berechnung des Brechungsindex. Jetzt ist es mit lastIndexOf(' '), aber das ignoriert, dass der nächste index könnte ein Raum sein, oder die aktuelle. Auch ich bin nicht Buchhaltung für andere Zeilenumbruch Zeichen. Allerdings sollte dies ein guter Ausgangspunkt.
http://jsfiddle.net/Y5Ftn/1/
InformationsquelleAutor der Antwort Josiah Ruddell
dies ist mein Skript, das den text und dann macht jeder Zeile eine Spanne
CSS:
html
JS
Müssen Sie bekam jQuery eingebunden.
InformationsquelleAutor der Antwort Христо Панайотов
Ich weiß nicht, aufgebaut in jQuery der javascript-Funktion, dies zu tun. Sie könnten jedoch, es selbst zu tun, aber es wäre möglicherweise langsam, wenn Sie haben eine Menge text.
In der Theorie, könnten Sie sicher, dass die Höhe auf auto gesetzt ist, entfernen Sie den text, und dann Wort für Wort wieder einsetzen. Auf eine änderung in der Höhe, entfernen Sie das Letzte Wort, und legen Sie Ihre dom-element. Wieder, das wird langsam sein, wenn es eine Menge text, und einen besseren Weg, dies zu tun wäre, nicht ändern Sie die ursprüngliche element, aber tun Sie es in ein anderes element, das verborgen wäre, und dann ersetzen Sie das ursprüngliche element auf Fertigstellung. Diese Weise können Ihre Benutzer nicht sehen, die Inhalte verschwinden und dann wieder kommen, Wort für Wort.
Andere Weg wäre, um ein ähnliches Prinzip, und beginnen Sie mit einem leeren element die gleiche Größe mit der Höhe auto, und legen Sie einen neuen Charakter und einen Raum, bis Sie eine neue Zeile. Von dort aus können Sie diese verwenden, als eine Annäherung mit der oben genannten Technik, oder Sie können blind addieren Sie die Länge der jede Zeichenfolge, bis Sie eine neue Zeile, unter Berücksichtigung der Breite des dom-Elements. Diese Technik funktioniert besser mit monospaced fonts obwohl, was ist wo mit es nur als Annäherung.
Das heißt, es gibt einen Weg zu Messen, den text mit canvas, aber das kann sehr extrem sein. In der Theorie wäre es, erstellen ein canvas-element, Holen Sie sich den Kontext, und wählen Sie die schriftart-Eigenschaften, und verwenden Sie dann die
context.measureText()
Methode. Ein Beispiel dafür finden Sie hier.InformationsquelleAutor der Antwort Ktash
Nicht sicher, was genau Ihr Anwendungsfall ist aber http://code.google.com/p/hyphenator/ möglicherweise eine Lösung zu Ihrem problem finden oder wenn Sie Graben sich in den hyphenator.js source-code, können Sie den code finden, die Sie suchen.
InformationsquelleAutor der Antwort Josh Schumacher
Ich denke, es wäre einfacher zu erkennen, mit einem regex-viel weniger code, unter Beibehaltung der Effizienz.
Hier ist etwas, was für mich gearbeitet:
Ich bin mir nicht sicher, ob dies funktionieren wird mit Ihrem broken strings, aber es funktioniert für die Erkennung von line-breks mit jQuery.
InformationsquelleAutor der Antwort streetlight
Alternativ können Sie auch vergleichen Sie die Breite des Textblocks mit seinen Eltern Breite. Wenn der block mindestens 98% der Breite des übergeordneten Elements, ziemlich sicher, dass es bricht
InformationsquelleAutor der Antwort Harijs Deksnis