Question 1

What is CSS line-clamp?

Accepted Answer

CSS line-clamp truncates text after a set number of lines and adds an ellipsis (...). It uses a combination of display:-webkit-box, -webkit-box-orient:vertical, -webkit-line-clamp and overflow:hidden. The line-clamp property is now part of the CSS Overflow Module and supported in all modern browsers.

Question 2

Is -webkit-line-clamp still needed in 2026?

Accepted Answer

The standard line-clamp property is supported in Chrome 111+, Firefox 114+, Safari 17.4+. For maximum compatibility you can still use -webkit-line-clamp alongside it. Most production sites use the -webkit- prefix because it works everywhere including older browsers, and it is what the spec is based on.

Question 3

Why is my line-clamp not working?

Accepted Answer

All four declarations are required: display:-webkit-box, -webkit-box-orient:vertical, -webkit-line-clamp:N and overflow:hidden. If you forget overflow:hidden the text will still show in full. Also make sure no other display rule (like flex or grid) overrides the -webkit-box value on the same element.

Question 4

Can I change the ellipsis color or style?

Accepted Answer

The ellipsis inherits the text color. To color it differently, wrap the clamped text in a span and use a pseudo-element, or apply color to the container. The standard line-clamp does not yet support custom truncation characters, so most developers style the whole text color instead.

🎛️

👁

📋