Question

I need to find a way to keep text on 3 lines regardless of its length using jQuery. (or javascript I guess)

So this text:

First Project Name Combined with First Location

Has breaks inserted to make it look like this:

First Project Name
Combined with
First Location

While this text:

Second Project Name Combined with Second Location And Text To Make This Text Area Even More Incredibly Extra Long

Has breaks inserted to make it look like this:

Third Project Name Combined with Third
Location And Text To Make This Text Area
Even More Incredibly Extra Extra Long

I assume the code will involve counting the number of characters or spaces, dividing by 3, and then inserting breaks after so many spaces relative to the divided length. Not really sure how to write this in code though.

I have a jsFiddle set up with the actual code I’m working with. The code needs to work well with that first bit of code. (which was already graciously solved by an awesome stackoverflow user)

Any ideas?

Answer 1

var text = 'Text to split in lines',
    lines = [],
    chunks, i;

text = text.split(' ');
chunks = Math.ceil(text.length / 3);

for ( i = 0; i < 3; i++) {
    lines.push( text.slice(i * chunks , chunks * i + chunks ).join(' ') );
}

Here’s the fiddle: http://jsfiddle.net/sCRvm/

---

And here you have it in plugin format:

(function($) {
    $.fn.splitToLines = function(numberOfLines) {
        return this.each(function() {

            var $this = $(this),
                lines = [],
                text, chunks, i;

            text = $this.text().split(' ');

            chunks = Math.ceil(text.length / numberOfLines);

            for ( i = 0; i < numberOfLines; i++) {
                lines.push( text.slice(i * chunks , chunks * i + chunks ).join(' ') );
            }

            $this.html( lines.join('<br />') );

        });
    };
}(jQuery));

Once you include this script, you could just call it like so:

$('div').splitToLines(3);

Here’s the fiddle: http://jsfiddle.net/BguKx/1/