texto de ajuste de jquery/css de abajo a arriba

Question

Estoy tratando de ajustar texto en un div usando css y/o jQuery de manera que el resultado final sea el más largo.

tan más bien que

__________ 
|this is | 
|text | 
|________| 

diría

__________ 
|this | 
|is text | 
|________| 

puedo envolver fácilmente el texto usando

white-space: pre-wrap; 

Pero no puedo encontrar nada de lo que me impedía hacer esta.

(lo único que pensé era invertir el texto, encontrar dónde ocurre el ajuste de línea, aplicar un <br/> en los mismos lugares, con el texto en el futuro ... pero no sé cómo comprobar dónde se ajusta la línea)

Answer 1

Terminé tomando la ruta, invirtiendo, comprobando dónde estaban los saltos de línea, y luego insertándolos en consecuencia. Por favor, siéntete libre de usar mi función. Esta función acepta un elemento jQuery (con texto que ya se ajusta) y vuelve a envolver su texto hacia arriba.

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

su es un plugin de jQuery llamado bacon

con esto se puede ajustar el texto de acuerdo a sus necesidades en cualquier forma que desee, sé que tiene que hacer una cosa sobre él, pero creo que puede ayudarle.

$(".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' 
}