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 ImplementationThis will set a maximum text height of 200 pixels, using [..] at the end of shortened text and will strip any HTML tag except <br/>
.. some text or HTML ..
$('.to_be_shortened').lc_txt_shortener('[..]', 250, 'p, strong, a');
ParametersPlugin 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
ExampleRight 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.
Restore textWanting to restore original text? Just use unshorten function on the same object
Enjoyed this freebie and want to show some appreciation?
Offer me a cofee or two to continue coding!