CSS Trick

Multi-Line Truncation

Limit text to specific number of lines with ellipsis using line-clamp.

#css #typography #truncation #layout

✓ Chrome 6+ ✓ Firefox 68+ ✓ Safari 5+ ✗ Edge

Line Clamp Truncation

Truncate text to a specific number of lines.

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

Line Clamp

INTERACTIVE

↔ Drag edge to resize

Lines

Font Size

14px

CSS Code

.excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 14px;
line-height: 1.5;
}

Despite -webkit- prefix, this has broad browser support and is safe for production.