Truncator Stack

Truncator Stack

add an ellipsis to multiline text

Text inside this stack will be truncated and an ellipsis (…) will be added to the end if it needs more lines than the number of lines set in this stack. Once published, hovering over the last line (when truncated), the last visible line and the rest of the text will be shown in a tooltip.

Although the Truncator Stack does not have many options (and it never will — don’t bother asking for it), it does what it can very well. Use it on its own, or inside other stacks like the BigLink Stack.

Demos
Here’s an example of the Truncator Stack with its default settings:

This text is way too long to fit on three lines, so it will always be truncated. Some filler text to make the text longer: Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

For more examples, and an overview of the options, please visit the demo page.

NB
Do not use any code, special characters (like  ) or even line breaks inside this stack; but only plain text.
The styling options in the page inspector (when selecting the content of this stack) do not work. Only use the styling options provided by this stack.
When nesting this stack inside another stack, the styling options of the surrounding stack may not always be applied to the Truncator Stack, but…
…when using this stack inside the BigLink Stack, set the text colors in the BigLink Stack, not in the Truncator Stack.

Background

Looking for a solid way to truncate text inside my BigLink Stack, I stumbled upon the jquery.ellipsis script by Jenna Smith (jjenzz). Although it does not have many features, I decided to use it for this stack anyway because the script lacks the quirks I encountered in many other libraries.

Limitations
When the visitor has JavaScript disabled in his browser, the truncation will not work.
The tooltip shown when hovering over the last line (when truncated) only show on a published page, not in RapidWeaver preview mode, etc.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).
Truncator HUD
fig. 1
© 2012-2018 Marathia Web Design | Contact