Limit Text Lines Preview Length

Limit Text Lines Preview Length

This code limits the amount of text shown in a preview, and ends the text with an ellipsis.

Add this code to the <head> section of your page or site settings.

.text-class {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;

Change the class name to the name that you're using for the text you want to limit.

Download Assets
See an Example Website

Other Code Snippets

Ready to learn more?

I've worked with countless businesses around the world. Maybe you'll be next.

Get in Touch