Built-in toolFree · No signup

CSS Line Clamp Generator

Truncate multi-line text with a CSS-only ellipsis using -webkit-line-clamp. Set the number of lines, adjust font size and line height, and edit the preview text directly. The output includes all required declarations for cross-browser support.

Share on X LinkedIn

Lines to show3

1 line10 lines

Font size16px

Line height1.6

Browser support

-webkit-line-clamp works in all modern browsers including Chrome, Firefox, Safari, and Edge.

Live preview — click to edit text

This is a long paragraph of text that will be truncated after the specified number of lines. You can click here and edit this text to preview how your own content will look when the CSS line-clamp property is applied. Keep typing to make it longer and see the ellipsis appear at the cut-off point.

Showing 3 lines at 16px / 1.6 line-height. Clamp height ≈ 77px.

CSS Output

.clamp-text {  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;  font-size: 16px;  line-height: 1.6;}

Was this tool helpful?

How to use

Set line count

Drag the slider to choose how many lines to show before the text is cut off with an ellipsis.

Adjust font settings

Match the font size and line height to your actual design so the preview is accurate.

Edit preview text

Click the preview area and type your real content to see exactly how truncation will look.

Copy CSS

The output includes all four required properties: display, -webkit-box-orient, -webkit-line-clamp, and overflow.