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>
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>
SplitLines is a useful jQuery plugin for situations where individual lines of text need to be treated as separate HTML elements. The ability to split wrapped text based on the available width or a specified width makes it possible to animate or manipulate each line independently. Support for nested HTML tags also makes the plugin interesting for more flexible text effects.
ReplyDeleteThe lightweight approach described here is particularly useful for developers experimenting with animated typography and dynamic text layouts. Understanding how plugins such as this work can also strengthen knowledge of jQuery selectors, DOM manipulation, and JavaScript-based interface behavior. A Javascript Online Training can help learners build the JavaScript fundamentals needed to work with these types of plugins.
The tutorial also clearly lists the jQuery dependency and the required script files, making it straightforward to understand the basic setup. Developers can experiment with different text widths and line heights to see how the plugin generates individual line elements. Exploring a Javascript Online Course can provide a broader foundation for creating interactive and dynamic web interfaces.
ReplyDelete