jQuery Plugin To Style The Last Line Of A Text - lastlineclass.js

lastlineclass.js is a super small jQuery plugin that gives you the ability to apply any CSS styles to the last line of a specific text element. For the first line of an element, you just need to use the ::first-line pseudo-element without any JS.

See also:

• jQuery Plugin To Split Text By Lines - SplitLines

How to use it:

1. Include the following JavaScript files on the webpage and the lastlineclass.js plugin is ready for use.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.lastlineclass.js"></script>

2. Calling the function will add the CSS 'last-line-class' to the last line of your text wrapped in the div element. The plugin also has the ability split the text into words wrapped individually in the span element.

<p class="demo">Lorem <em>ipsum</em> dolor sit amet consectetuer</p>

$('.demo').lastlineclass();

3. This will convert the last line of the paragraph text into ...

<p class="demo">
  <span>Phasellus</span> <span>leo</span> <span>dolor</span> <span>tempus</span> <span>non</span>
  <div class="last-line-class">
    <span class="last-line-item">auctor</span> <span class="last-line-item">et,</span> <span class="last-line-item">hendrerit</span> <span class="last-line-item">quis</span>
   </div>
</p>

4. Style the last line text whatever you like in the CSS.

.last-line-class {
  ...
}

.last-line-item {
  ...
}

5. Modify the default CSS class & wrapper elements.

$('.demo').lastlineclass({
  'class' : 'last-line-class',
  'wordWrap' : 'span',
  'lastLineWrap' : 'div'
});

---

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