How to Split Text into Lines – SplitLines jQuery Plugin

SplitLines is a lightweight jQuery plugin which allow you to split normal text into lines. It splits new lines of wrapped text into their own HTML elements, allowing you to animate or operate on each line individually. Works with nested HTML tags as well.

splitLines() takes a block of text and splits it up into separate lines based on the width of the box or a width passed to the function.

How to Split Text By Lines

Libraries

Include required libraries on page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.splitlines.js"></script>

<div id="mytext">
    This is an <strong>example</strong> of some long text 
    that we want to split into lines.
</div>

$(function() {  
 $('#mytext').splitLines({
    tag: '<div><span class="someClass">', //Set the HTML tag to wrap the lines in
    width: 200, // Set width to the text lines
    keepHtml: true // allow / don't allow html in element. 
 });
});