The CSS line-clamp property enables text truncation to a specified number of lines, perfect for maintaining clean layouts in blog previews, card designs, or limited-space components.

You can achieve this functionality using only CSS, without JavaScript.

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

Advanced example

By setting a value for the --line-clamp variable in HTML, you can dynamically control the number of visible lines for any element without redundant CSS. In var(--line-clamp, 1);, the value 1 serves as the default if no custom value is provided.

.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--line-clamp, 1);
}