LC Text Shortener
jQuery Plugin
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
<!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>
Function 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
Second 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>