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


Include required libraries on page.

<script src="//"></script>
<script src="jquery.splitlines.js"></script>


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

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


Call the plugin with folloing custom option for splitting text into lines.

$(function() {  
    tag: '<div><span class="someClass">', 
    width: 200, 
    keepHtml: true 

See live demo and download source code.


Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.