ggcoder.com

Presets

Number of Lines3 lines

Options

Show ellipsis (...) when text is truncated

Sample Text

Live Preview

This is a longer text that provides a more comprehensive demonstration of the CSS line clamp feature. It contains multiple sentences and paragraphs to show how text truncation appears when you have more content than can be displayed within the specified number of lines. This helps users understand the visual effect and functionality of line clamping in web design.

Text length:366 chars

Generated CSS

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

How it works

-webkit-line-clamp limits text to specified lines
-webkit-box-orient: vertical sets vertical layout
overflow: hidden hides excess content
Widely supported in modern browsers

Loading tool...