CSSAwwwards
+ Submit tool
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.

3
1 line10 lines
16px
1.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;}

How to use

01

Set line count

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

02

Adjust font settings

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

03

Edit preview text

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

04

Copy CSS

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

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →