CODEWITHSUNDEEP
javascriptjqueryhtmlcsstext
BananaNeil
BananaNeil

Reputation: 10762

jquery/css wrap text bottom up

I am trying to wrap text in a div using css and/or jQuery such that the bottom line is the longest.

so rather than

__________
|this is |
|text    |
|________|

it would say 

__________
|this    |
|is text |
|________|

I can easily wrap the text using 

    white-space: pre-wrap;

But i can't find anything that would let me do this.

(one thought i had would be to reverse the text, find where the line wrapping happens, apply a <br/> in the same places, with the text going forward.. but i dont know how to check where the line wraps)

Upvotes: 5

Views: 1015

Answers (2)

BananaNeil
BananaNeil

Reputation: 10762

I ended up taking the route, of reversing, checking where the line breaks were, and then inserting them accordingly. Please feel free to use my function. This function accepts a jQuery element (with text that already wraps), and re-wraps it's text upward.

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(''));
}

Upvotes: 0

Ankur Verma
Ankur Verma

Reputation: 5933

Their is a plugin in jquery called bacon

With this you can wrap text according to your needs in any shape you want, I know you have to do a stuff over it but I think it may help you .

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

Upvotes: 1

Related Questions