What is this?
Micro jQuery plugin creating excerpts on the fly, basing on 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="path-to/jquery.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>
Function parameters
| Param # | Name | Description |
|---|---|---|
| 1 | ending text | (string) what will be appended after shortened text. By default is [..] |
| 2 | maximum height | (int/bool) maximum text’s height. By default wrapper’s height |
| 3 | 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 |
Live Example
Second block is set to be maximum 200 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.
Text restore
Wanting to restore the original text?
Just use unshorten function on the same object
$(document).ready(function(e) {
$('.to_be_shortened').lc_txt_unshorten();
});