Vanilla by Plus Three
An Advanced, Flexible Front-End Development System

Truncated Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nunc non odio ultricies dignissim. Quisque lobortis viverra ipsum, accumsan ultrices orci tempor non. Donec eu ipsum quam. Nam consequat dapibus nisi id malesuada. Vestibulum gravida auctor erat, non sagittis justo ultricies ac. Cras ac mauris at ligula feugiat auctor. Quisque vehicula ornare quam ut rhoncus. Curabitur ac orci libero. Pellentesque euismod pellentesque interdum. Fusce scelerisque tellus id mauris vestibulum non consectetur libero consequat. Quisque accumsan, quam id auctor varius, enim ligula vehicula enim, eu faucibus ante nisl sed metus. Integer ut est tellus, non suscipit velit. Vestibulum vitae quam nisi, sit amet malesuada ipsum.

In tempor arcu ac nulla tempus at feugiat nunc lobortis. Pellentesque in lectus a libero facilisis rhoncus eleifend eget tortor. Vestibulum urna ligula, imperdiet sed tempor sit amet, facilisis ut neque. Ut tempus sodales varius. Phasellus vel commodo dolor. Proin iaculis odio id est bibendum volutpat. Nam in rutrum arcu. Quisque auctor, turpis sit amet sagittis euismod, ante erat ullamcorper felis, sed imperdiet dui odio et turpis. Cras mollis, ipsum ut lacinia commodo, est quam pellentesque tellus, id consectetur augue nulla in nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ac lectus enim. Quisque sed accumsan leo. Nunc blandit ultricies massa, viverra semper felis tincidunt id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


Notes

Default truncate styles are in vanilla.css, and can be overridden as needed.

Unlike most other components, this one does not have the class 'component' as part of the wrapper div, since conceivably any kind of content could be targetted for truncation.

The JS function has the following options:

  • height: How much content to display. Defaults to 100px.
  • tolerance: We only truncate if the original content height is greater than height + tolerance. Defaults to 20px;
  • readMore: The text of the read-more button. Defaults to 'Read More'.
  • readLess: The text of the read-less button. Defaults to 'Read Less'. This is still a to-do item.