Become a Skillthrive author!

CSS line clamp

By Hunter Becton on July 5, 2022

.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

How to use

Add the above CSS to the text you want to shorten to a specific number of lines. Change the -webkit-line-clamp value to the number of lines you want to show.