typographybeginner

Multi-line Truncate

Truncate text after a specific number of lines with ellipsis.

Preview

This is a long paragraph that will be truncated after three lines. The remaining content will be hidden and replaced with an ellipsis. This technique is useful for card descriptions and previews where you want to limit the visible text while indicating there's more.

Tailwind Classes

line-clamp-3

CSS Code

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

HTML Example

<p class="line-clamp-3">
  This is a long paragraph that will be truncated after three lines.
  The remaining content will be hidden and replaced with an ellipsis.
  This technique is useful for card descriptions and previews where
  you want to limit the visible text while indicating there's more.
</p>

Use Cases

Card descriptionsBlog excerptsProduct descriptionsComments

Browser Support

All modern browsers

#truncate#text#overflow#clamp