Foundations

Line Clamp

Use line clamp classes to limit long text to a fixed number of lines. Choose the tab that matches your starter.

Base class

Bootstrap line clamp needs this base class to hide overflow and enable line clamping.

Clamp	Class	Use
Base	`.kf-line-clamp`	Adds the line clamp behavior

Line count classes

Add one line count class with the base class.

Clamp	Class	Use
1 line	`.kf-line-clamp-1`	Sets the clamp to 1 line
2 lines	`.kf-line-clamp-2`	Shows 2 lines
3 lines	`.kf-line-clamp-3`	Shows 3 lines
4 lines	`.kf-line-clamp-4`	Shows 4 lines
5 lines	`.kf-line-clamp-5`	Shows 5 lines
6 lines	`.kf-line-clamp-6`	Shows 6 lines

Preview

This preview uses a 3-line clamp.

KitFront line clamp utilities limit long content to a fixed number of lines while keeping the original text available in the HTML. KitFront line clamp utilities limit long content to a fixed number of lines while keeping the original text available in the HTML.

Use line clamp

Add .kf-line-clamp and the line count class.

<p class="kf-line-clamp kf-line-clamp-3">
  Long text content goes here.
</p>

Change line count

Keep .kf-line-clamp and replace only the line count class.

<!-- 2 lines -->
<p class="kf-line-clamp kf-line-clamp-2">...</p>

<!-- 4 lines -->
<p class="kf-line-clamp kf-line-clamp-4">...</p>

Line clamp utilities

Tailwind line clamp utilities set the line count directly.

Clamp	Class	Use
1 line	`line-clamp-1`	Shows 1 line
2 lines	`line-clamp-2`	Shows 2 lines
3 lines	`line-clamp-3`	Shows 3 lines
4 lines	`line-clamp-4`	Shows 4 lines
5 lines	`line-clamp-5`	Shows 5 lines
6 lines	`line-clamp-6`	Shows 6 lines
None	`line-clamp-none`	Removes line clamp

Preview

This preview uses a 3-line clamp.

Use line clamp

Add the line count utility to the text element.

<p class="line-clamp-3">
  Long text content goes here.
</p>

Change line count

Replace the line count utility.

<!-- 2 lines -->
<p class="line-clamp-2">...</p>

<!-- 4 lines -->
<p class="line-clamp-4">...</p>

Patterns

List Items