jQuery Convert Text into Columns

Posted on 4th November 2013 in Code.

This is some cross-browser jQuery code I wrote to convert text into columns. The function can convert an article or block of text into any amount of columns that you specify.

The code has some advanced features such as having a check in place to make sure that it’s not snipping your article midway through a word or sentence, instead it will loop through to find the next closest full stop before starting the next column of text. You can also specify any amount of columns you need, the jQuery code will then work out how many words should be in each column, and produce your final converted text columns.

This code also uses HTML5 elements, so if you’re not using a feature detection library like Modernizr, and need to support older browsers that don’t understand HTML5 elements, you may want to use JavaScript to define the HTML5 article tag, or simply change the output markup to div’s.

Code:

Usage:

Just use the function on a block of text, it will then calculate how many words it needs in each column, split it up into the columns amount you specify, and return the result in the element you specify. Don’t forget to float your outputted articles to the left, so they appear as columns!

Tags

Sharing