CSS Line Clamp Generator

Four declarations: display: -webkit-box, -webkit-line-clamp with your line count, -webkit-box-orient: vertical, and overflow: hidden. Together they cap the visible lines and let the browser add the ellipsis. Choosing one line appends a commented white-space alternative underneath.

The container is laid out as a vertical -webkit-box, the line-clamp value limits how many lines render, and overflow: hidden trims the rest. When text is cut, the browser draws a trailing ellipsis automatically, so you never add one by hand.

Yes. Despite the -webkit- prefix it is honoured across current Chrome, Safari, Edge and Firefox, and the prefixed form is still the standard way to clamp multiple lines. It is a well established technique rather than an experimental one.

A single line does not need the box model at all. white-space: nowrap with overflow: hidden and text-overflow: ellipsis is shorter and more predictable, so the tool adds that as a commented block whenever you set the count to 1.

The Lines field accepts whole numbers from 1 to 10 through its stepper. The underlying engine will clamp to any integer of 1 or more, but the interface caps the control at 10, which covers almost every card, list and preview layout.

No. Clamping works by line count, not by a pixel height, so the box grows to fit up to the chosen number of lines and hides anything beyond. This makes it robust across different font sizes and line heights without hard-coding a height.

The most common causes are a missing display: -webkit-box, a container that is wide enough to fit all the text on fewer lines, or a child element that breaks the box formatting. Apply the rule to the element that directly holds the text and avoid overriding overflow elsewhere.

Not through this technique. The trailing ellipsis is drawn by the browser and is not styleable, so the output is a standard three-dot ellipsis. If you need a custom marker you would have to measure and truncate the text with JavaScript instead.

No. The CSS is generated in your browser as you change the line count, and your settings are never uploaded.