Generate copy-ready CSS for truncating text with an ellipsis — single line, multi-line clamps, or soft fade-outs — and preview the result against your own sample text in a resizable frame.
Single-line truncation requires white-space: nowrap, overflow: hidden, and text-overflow: ellipsis on a block-level box with a constrained width.
Multi-line clamping historically depended on the -webkit-line-clamp trio (with display: -webkit-box and -webkit-box-orient: vertical). The standardised line-clamp property now works in modern Chromium, Safari 18.2+, and recent Firefox, paired with display: -webkit-box for compatibility.
Fade-out avoids ellipsis entirely — clip the box to a fixed height and overlay a gradient so the text dissolves into the background. Works for unknown line counts and styled text where ellipsis looks abrupt.