Skip to main content

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 heightSplitLines ( $.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>


 

Comments

Popular posts from this blog

How to create a Barcode Using PHP Barcode 128 Generator

A barcode is an optical, machine-readable, representation of data, the data usually describes something about the object that carries the barcode.We will use PHP to generate Barcode in this tutorial. In this script, we are using coding which will generate barcodes in barcode format Code 128 . First, we will create index.php which will ask for the user input for which Barcode has to be created PHP Barcode Generator <fieldset><legend>Detail Informations</legend><form action="createbarcode.php" method="post"><b>Enter Your Code </b><input name="barcode" type="text" /><input type="submit" value="Create Barcode" /></form></fieldset> Now we will create createbarcode.php which will call function from Barcode code128 class for creating barcode <? php include('barcode128.php'); // include php barcode 128 class // design our barcode display echo

Document Expired or Webpage has expired on back button

If you have a dinamic website and want to allow your visitors to use the back button after they sent a form with the post method, the best combination I found was: <?php header("Expires: Sat, 01 Jan 2000 00:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: post-check=0, pre-check=0",false); session_cache_limiter("must-revalidate"); // and after you start the sessionsession_start(); ?> I try some combinations using header("Cache-Control: no-cache, must-revalidate"), but when clicking the back button, the last changes in the form back to their previous states. The combination above works fine with IE 6.x. I didn't test this with other browsers. When I try something like session_cache_limiter("nocache, must-revalidate") it doesn't work. The page only updates when I used the browser's refresh button. In dynamic web sites this is not g

How to Enable IMAP PHP in xampp

The imap extension comes as standard with the PHP installation. You just need to enable it in your php.ini   Enable IMAP in XAMPP: You need to configure your php.ini file to enable IMAP extension Search for the line ;extension=php_imap.dll and remove semicolon(;) and restart your xampp. The line should look like as mentioned below. extension=php_imap.dll Note : New php version does not have dll anymore. The default php.ini should already contain a line to load the extension but commented out: ;extension=imap Remove semicolon from above like below extension=imap Enable IMAP in Linux: If you are using LAMP server, First install IMAP using the command on terminal $ sudo apt-get install php5-imap To enable IMAP, run the following command. sudo phpenmod imap Restart apache server with below command sudo service apache2 restart