2016-01-13 2 views
7

Kontext:Auf Überlauf einen neuen div und Transferüberlauftext zum neuen div erstellen

ich an einem Projekt arbeite, dass ordnungsgemäß abgeschlossen, wenn sollte als spezialisierten Texteditor funktionieren. Es braucht speziell Seiten für die Ausgabe, also im Gegensatz zu den meisten Online-Texteditoren, die einfach eine immer expandierende Textbox oder etwas Mechanisch ähnliches verwenden können, suche ich nach einer Möglichkeit, eine "neue Seite" (ein neues Container-Div im Wesentlichen) zu erstellen, wenn es überläuft die eine ist in.

Ich fand eine related stackoverflow question und es scheint von meiner Suche, dass die meisten Lösungen nicht die beste für aktiv ändern Text wäre und eher für die Verwendung bei Seite Render geeignet sind. Unter optimalen Umständen sollte es ähnlich funktionieren wie das Erstellen einer neuen Seite in einem Word-Dokument (automatisch erstellen, wenn es überläuft) und javascript/jquery verwenden.

Ich weiß, dass es wahrscheinlich komplizierter ist, dies zu tun, als es ursprünglich erscheinen würde, aber ich hatte gehofft, jemand würde von einem Artikel oder Code wissen, der mich in die richtige Richtung weisen könnte.

Problem:

Ich glaube, ich tatsächlich verarbeiten kann (neben div-Container) „um die neue Seite zu schaffen“, aber ich bin nicht sicher, wie der Text aktiv überfüllt zu handhaben. Zum Beispiel, wenn jemand etwas Text auf der ersten Seite löscht, wäre es sehr unhandlich, wenn der Text auf der zweiten Seite einfach dort hängen würde. Ich möchte, dass der Text/die Seiten mindestens ähnlich zu reagieren, wie sie würden, wenn Sie ein Word-Dokument bearbeiten würden.

Ich möchte nicht den Text jedes Mal überprüfen, wenn ein Zeichen hinzugefügt oder gelöscht wird, aber ist dies die einzige Möglichkeit, so etwas zu tun? Und wenn ja, was ist der effizienteste Weg für mich, damit ich den Browser nicht verbiegen kann?

Dies ist das Projekt an dem ich arbeite mehr Kontext http://www.naturalcrit.com/homebrew/

+2

Ich denke, dass Sie aktiv auf Benutzereingabe überprüfen müssen, um den Text neu zu fließen. Warum sollte man nicht so etwas wie das Columnizer-Plugin als Ausgangspunkt verwenden: http://welcome.totheinter.net/columnizer-jquery-plugin/ – Patareco

+1

Ich sehe nicht, wie du davon wegkommen würdest, auf die Tastenanschläge zu schauen. Es sei denn, Sie können einen Pseudo-Stil Selektor wie ': Überlauf 'fangen, aber das ist nicht vorhanden. Brauchen Sie ein Beispiel dafür, was Sie tun, um sicher zu sein. Man könnte ein 'div' in ein' div' einbinden und die Höhe oder die Breite des inneren 'div' auf einen Schwellwert des äußeren' div' überprüfen, dann "overflow" verschieben. Sie müssen das Ereignis immer noch mit Tastenanschlägen verknüpfen, da Sie das 'w' und' h' des inneren 'div' jedes Mal messen, wenn eine Änderung am Inhalt vorgenommen wird. Vielleicht können Sie an '.change()' binden. – Twisty

+1

Sehen Sie sich http://StackOverflow.com/questions/2059743/detect-Elements-Overflow-using-Jquery für einige Überlauferkennungstechniken an. – Twisty

Antwort

1

ich, dass die beste Antwort auf ihre Funktionalität und Einfachheit beide denken geben column CSS3 verwenden und sie nur der Breite erweitern lassen. Dann fügen Sie den Spalten oder anderen Elementen Stile hinzu, um sie wie Seiten aussehen. Fügen Sie eine X-Achsen-Bildlaufleiste hinzu, um durch die Pseudo-Seiten zu blättern (das sind nur einige Spalten mit einer festen Höhe) und praktisch fertig.

Dies bedeutet, dass die Seiten von links nach rechts statt nach oben und unten gehen, aber es ist überhaupt keine schlechte Lösung. Vielen Dank @Twisty für die einfache Lösung mit etwas, das ich bereits benutze und leicht Zugang zu haben. Es beinhaltet nicht einmal Code, nur ein paar mehr CSS!

+0

Gutes Geschäft! Genießen! – Twisty

Verwandte Themen