CODEWITHSUNDEEP
javascripthtmlcss
jakschu
jakschu

Reputation: 127

Break long text into <div> elements on client-side

Let's assume I have a very long text, for instance an long article.
Is it possible to to break the text into equaly long div elements on client-side with:

css (this would be awesome!) ? javascript ?

The goal: I'd love to have those divs side by side with float.

- I know it is possible from server side, since I have written something that does exactly what I want in PHP. [If anyone is interested just say a word]

Upvotes: 4

Views: 794

Answers (1)

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could do something like this...

var a = $('#text').text().split(' ');
var b = c = d = e = '';

var b = a.length/3;

if((a.length % 3) > 0){
    a.push(' ');
    b = a.length/3;

    if(b*3 % 3 > 0){
        a.push(' ');
        b = a.length/3;

        if(b*3 % 3 > 0){
            a.push(' ');
            b = a.length/3;

            if(b*3 % 3 > 0){
                a.push(' ');
                b = a.length/3;            
            }
        }
    }    
}


for(var i = 0; i < b; i++){
   c += a[i] + ' ';
}

for(var j = b; j < b*2; j++){
   d += a[j] + ' ';
}

for(var k = b*2; k < b*3; k++){
   e += a[k] + ' ';
}

$('#text').replaceWith('<div class="replace">' + 
                       c + '</div><div class="replace">' + 
                       d + '</div><div class="replace">' + 
                       e + '</div>');

And the css

.replace{
    float:left;
    margin:1%;
    width:30%;        
}

Example: http://jsfiddle.net/jasongennaro/NsdST/2/

Upvotes: 3

Related Questions