Text truncation

With text truncation helper class you can limit multiple line to one with three dots, it is even possible to create a toggle to truncate and expand text.

Simple truncation

index.html

<p class="truncate">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
  erat ut turpis.
</p>

Toggle truncation

You can add toggle truncation class directly to the .truncate element or create another element like button which its target it .truncate element, check examples below to find out how it works.

info

You can make toggle truncation disabled by default, by adding .show-text to .truncate element.

index.html

<p class="truncate toggle-truncate show-text">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
  erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis
  facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
</p>

<p class="truncate my-truncated-text">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
  erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis
  facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
</p>

<button class="button toggle-truncate" data-truncation-target=".my-truncated-text">Toggle truncate</button>