Zeichen beim Zeilenumbruch hinzufügen

Question

Hallo, ich habe eine Liste (ul) und in ihr einige "li".

Wie erkenne ich mit Javascript (jQuery), wann ein Zeilenumbruch erfolgt und füge einige Zeichen am Anfang hinzu.

So zum Beispiel:

I have a very looooong text in 200px width li.

Das Ergebnis ist:

I have a very looooong text 
in 200px width li.

Und ich möchte " + " am Anfang der neuen Zeile hinzufügen => Ergebnis:

I have a very looooong text 
 + in 200px width li.

thx

Answer 1

Schwierige Frage, hier ist eine Idee: Machen wir ein zusätzliches div, das an der gleichen Stelle wie das li positioniert ist und die gleichen CSS-Eigenschaften hat. Geben Sie dem li ein padding-left von 15px. Füllen Sie die neue div mit +'s für jede Zeile die li ist höher als 1 Zeile.

var plusses = $('li').height() / $('li').css('line-height').slice(0,-2); //number of lines
var i = 1;
var sLines = '<br />';  // the first line doesn't need a + 
while(i < plusses) {
    sLines+='+<br />'; // every other line does
    i++;
}
$('#newdiv').html(sLines);

Dann brauchen Sie nur noch das Bündel zu css'ing!

Answer 2

Wie wäre es mit etwas in reinem CSS? Demo - http://jsfiddle.net/FDD7n/

Funktioniert bei mir in Chrome 11. Dies kann je nach Schriftgröße einige Anpassungen erfordern :)

Answer 3

Wenn der Browser beschließt, den Text in einer separaten Zeile zu platzieren, weil die Breite des Elternteils nicht ausreicht, gibt es wahrscheinlich keine Möglichkeit, dies zu erkennen. Wenn Sie selbst die Zeilenumbrüche in Ihrem HTML erzeugen, könnten Sie nach " \n " und ersetzen sie durch " \n +". Sie könnten zum Beispiel die Textbreite berechnen ( Berechnung der Textbreite ) und vergleichen Sie sie mit der übergeordneten Breite, obwohl es vielleicht nicht so einfach ist, zu erraten, wo der Browser die Zeile umbricht.

Answer 4

Die einzige Möglichkeit, die mir einfällt, ist (unter der Annahme, dass der Browser den Umbruch an einem Leerzeichen vornimmt), alle Wörter in eine Spanne einzuschließen und dann programmatisch eine Schleife durch die Geschwister zu ziehen, um die y-Position zu verfolgen. Wenn es eine signifikante Änderung in der y-Position gibt, haben Sie wahrscheinlich umbrochen... Also fügen Sie das "+" hinzu und iterieren weiter.

Beachten Sie, dass das Hinzufügen eines " + " sich wahrscheinlich auch auf den Zeilenumbruch des restlichen Strings auswirkt und einen zusätzlichen Zeilenumbruch verursachen kann