Line Clamp

Limiting the number of lines displayed for text content.

Usage

Use d-lc-{n} to truncate text at a specific number of lines with an ellipsis.

Avoiding display conflicts

Flex example

Grid example

Custom

The d-lc-{n} utility currently goes up to 9. Should you need to go beyond, use the d-lc-custom class and locally adjust the CSS custom property --lc-lines.

Classes

Class
Output
.d-lc-1 -webkit-line-clamp: 1 !important;
.d-lc-2 -webkit-line-clamp: 2 !important;
.d-lc-3 -webkit-line-clamp: 3 !important;
.d-lc-4 -webkit-line-clamp: 4 !important;
.d-lc-5 -webkit-line-clamp: 5 !important;
.d-lc-6 -webkit-line-clamp: 6 !important;
.d-lc-7 -webkit-line-clamp: 7 !important;
.d-lc-8 -webkit-line-clamp: 8 !important;
.d-lc-9 -webkit-line-clamp: 9 !important;
.d-lc-none -webkit-line-clamp: unset !important;
.d-lc-unset -webkit-line-clamp: unset !important;

Line Clamp documentation last updated Thursday, June 18, 2026