Split Text into Lines - SplitLines | Free jQuery Plugins

SplitLines is a lightweight jQuery plugin which allow you to split block of text into multiple lines using specific html tag(s) and defined width & line height. SplitLines ( $.splitLines() ) is a jQuery plugin that 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.


Requirements
jQuery 1.4.2 or later

How to Split Text By Lines
Include required libraries on page.

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

HTML:
Below is the sample text which need to split into lines.

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

Below is the sample Function used to split long text into lines.

$(function() { 
 $('#mycontent').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.
 });
});

Result:

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