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 drop a line?

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

Get in Touch