Micro jQuery plugin creating excerpts on the fly, basing on a fixed value or container’s height.

How many times you must fit some dynamic text in a precise space? Nowadays with responsive-layout standards is a really actual matter. With this plugin things get easier!

In only 3KB, you’ve got a powerful tool shortening texts to to fit a specific height or a specific container.
Plus it is also able to maintain few HTML tags (a, strong, em, p), through shortening process.



Basic Implementation

This will set a maximum text height of 200 pixels, using [..] at the end of shortened text and will strip any HTML tag except <br/>

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="lc_text_shortener.min.js" type="text/javascript"></script>
</head>
<body>
<div class="to_be_shortened">
.. some text or HTML ..
</div>

<script type="text/javascript">
$(document).ready(function(e) {
$('.to_be_shortened').lc_txt_shortener('[..]', 250, 'p, strong, a');
});
</script>
</body>
</html>

Parameters

Plugin has got just three simple parameters:

ending text
(string) what will be appended after shortened text. By default is [..]
maximum height
(int/bool) maximum text’s height. By default wrapper’s height
allowed tags
(string) which HTML tags have to be maintained during shortening. Actually supported ones are p, strong, em, a. To be used as single string, comma split

Example

Right block is set to be maximum 250 pixels high. Note how tags are maintained during resizing.
Resize browser to see how it handles dynamic shape changes.

Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.


Restore text

Wanting to restore original text? Just use unshorten function on the same object

<script type="text/javascript">
$(document).ready(function(e) {
$('.to_be_shortened').lc_txt_unshorten();
});
</script>

Enjoyed this freebie and want to show some appreciation?

Offer me a cofee or two to continue coding!



lcwebLC Text Shortener – jQuery Plugin