How can you achieve multi-line text truncation with ellipsis in CSS?

How can you achieve multi-line text truncation with ellipsis in CSS?

• A. Use display: -webkit-box; -webkit-line-clamp: N; -webkit-box-orient: vertical; overflow: hidden.
• B. Use white-space: nowrap; text-overflow: ellipsis.
• C. Use overflow: visible; text-wrap: balance.
• D. Set display: block; line-clamp: N.

Answer: (A)

Multi-line truncation with an ellipsis relies on turning the element into a box that can limit how many lines are laid out, then hiding the rest. The proven approach uses the WebKit line-clamp technique: you make the element a box with display: -webkit-box, stack lines vertically with -webkit-box-orient: vertical, and specify how many lines to show with -webkit-line-clamp: N, while hiding the overflow. In browsers that support it, this combination yields an ellipsis after the last visible line. Other options fail because single-line truncation uses white-space: nowrap; text-overflow: ellipsis, which doesn’t affect multiple lines. The third option relies on non-existent properties for this effect. The fourth uses line-clamp without the required -webkit-box setup, so it won’t reliably clamp multiple lines across browsers.

Multi-line truncation with an ellipsis relies on turning the element into a box that can limit how many lines are laid out, then hiding the rest. The proven approach uses the WebKit line-clamp technique: you make the element a box with display: -webkit-box, stack lines vertically with -webkit-box-orient: vertical, and specify how many lines to show with -webkit-line-clamp: N, while hiding the overflow. In browsers that support it, this combination yields an ellipsis after the last visible line.

Other options fail because single-line truncation uses white-space: nowrap; text-overflow: ellipsis, which doesn’t affect multiple lines. The third option relies on non-existent properties for this effect. The fourth uses line-clamp without the required -webkit-box setup, so it won’t reliably clamp multiple lines across browsers.