jquery/css wrap text bottom up

Question

Sto provando a racchiudere il testo in un div utilizzando css e/o jQuery in modo tale che la linea di fondo sia la più lunga.

così piuttosto che

__________ 
|this is | 
|text | 
|________| 

direbbe

__________ 
|this | 
|is text | 
|________| 

posso facilmente avvolgere il testo utilizzando

white-space: pre-wrap; 

Ma non riesco a trovare nulla che possa farmi fare Questo.

(un pensiero che ho avuto sarebbe invertire il testo, trovare dove la linea di confezionamento accade, applicare una <br/> negli stessi luoghi, con il testo che va in avanti .. ma non so come controllare dove la linea avvolge)

Answer 1

ho finito per prendere la rotta, di invertire, controllando dove le interruzioni di riga sono stati, e quindi inserendo di conseguenza. Sentitevi liberi di usare la mia funzione. Questa funzione accetta un elemento jQuery (con testo che già avvolge) e re-avvolge il suo testo verso l'alto.

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

il loro è un plugin jQuery chiamato bacon

Con questo si può disporre il testo in base alle proprie esigenze in qualsiasi forma desiderata, so che hai a che fare una roba su di esso, ma penso che possa aiutare.

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