Truncate Any Lines of Text with an Ellipsis

Limit the number of text lines to simulate a preview and to keep your designs clean.

Copy Code

<style>
/* Apply "..." after 3 lines of text */
.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

Super easy to use, yet very powerful.

Simply copy the code above, and paste it into an HTML embed on your website. I recommend everyone building in Webflow to have an HTML embed with their custom global styles as a reusable component at the top of every page.

Apply the class names directly to the text element you are trying to truncate in the Webflow designer, "text-style-3lines" or "text-style-2lines".

Feel free to change the class names if you like, and change the numbers in the code to suit the number of lines you need visible if these aren't exactly what you need.