line-clamp

Utilities for clamping text to a specific number of lines.

Examples

Basic example

Use line-clamp-<number> utilities like line-clamp-2 and line-clamp-3 to truncate multi-line text after a specific number of lines:

Undoing line clamping

Use line-clamp-none to undo a previously applied line clamp utility:

<!-- [!code classes:lg:line-clamp-none] -->
<p class="line-clamp-3 lg:line-clamp-none">
  <!-- ... -->
</p>

Using a custom value

Responsive design