jquery/css wrap text bottom up

Question

J'essaye d'emballer du texte dans un div en utilisant css et/ou jQuery de sorte que la ligne du bas soit la plus longue.

donc plutôt que

__________ 
|this is | 
|text | 
|________| 

il dirait

__________ 
|this | 
|is text | 
|________| 

Je peux facilement envelopper le texte en utilisant

white-space: pre-wrap; 

Mais je ne peux pas trouver tout ce qui pourrait me laisser faire ce.

(une pensée que je devrais serait d'inverser le texte, trouver où l'enroulement de ligne arrive, appliquez un <br/> aux mêmes endroits, avec le texte en avant .. mais je ne sais pas vérifier où la ligne s'enroule)

Answer 1

Je fini par prendre la route, d'inverser, vérifier où les sauts de ligne ont été, puis de les insérer en conséquence. N'hésitez pas à utiliser ma fonction. Cette fonction accepte un élément jQuery (avec du texte qui s'enroule déjà) et réenveloppe le texte vers le haut.

function wrapUp(element){ 
    width = element.width(); 
    string = element.text().split(' '); 
    element.text(''); 
    reversed = string.reverse(); 
    var height = 0; 
    for (var i=0;i<reversed.length;i++){ 
     reversed[i] += ' '; 
     element.text(element.text()+reversed[i]); 
     if (height != element.height()){ 
      reversed.splice(i,0,"<br/>"); 
      i++; 
     } 
     height = element.height(); 
     console.log(element.height()); 
    } 
    element.html(reversed.reverse().join('')); 
} 

Answer 2

Leur est un plug-in dans jquery appelé bacon

Avec cela, vous pouvez envelopper le texte selon vos besoins en toute forme que vous voulez, je sais que vous devez faire des choses sur elle, mais je pense que cela peut vous aider.

$(".baconMe").bacon({ 
    'type' : 'bezier', 
    'c1' : { x : 10,  y : 0 }, 
    'c2' : { x : -115,  y : 170 }, 
    'c3' : { x : 35,  y : 340 }, 
    'c4' : { x : 15,  y : 480 }, 
    'align' : 'right' 
}