jQuery Plugin To Split Text By Lines - SplitLines

File Size: 6.39 KB
Views Total: 5573
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Split Text By Lines - SplitLines

SplitLines is a lightweight jQuery plugin that allows you to split a block of text into separate lines using specific html tag(s) based on the width of the box or a width passed to the function. Then you can style and animate each line individually.

How it works:

  1. Splits contents into words, keeping their original Html tag. Note that this tags *each* word with the tag it was found in, so when the wrapping begins the tags stay intact. This may have an effect on your styles (say, if you have margin, each word will inherit those styles).
  2. Splits words by spaces.
  3. Formats html with tags and wrappers.

See Also:

How to use it:

1. Load the main JavaScript file after jQuery library and we're ready to go.

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

2. Call the plugin with default options on the text wrapping element and done. By default, the plugin tries to use the element's width. If you don't define a width, there's no way to split it by lines.

$('#text-container').splitLines();

3. Set the HTML tag to wrap the lines in:

$('#text-container').splitLines({
  tag: '<div>'
});

4. Determine Whether or not to try and preserve the html within the element.

$('#text-container').splitLines({
  keepHtml: true
});

5. Set a given width to the text lines.

$('#text-container').splitLines({
  width: 200
});

Changelog:

2024-02-22

2020-03-26

  • Added support for --line-index with older versions of jQuery

2018-10-14

  • Fixed auto-width not sizing elements properly

2018-04-11

  • Preserving html line breaks.

This awesome jQuery plugin is developed by jeremyharris. For more Advanced Usages, please check the demo page or visit the official website.