CSS Line Clamp & Text Truncate Generator
Turn any line count into single-line ellipsis or multi-line line-clamp CSS
Generates ready-to-paste CSS for truncating text — from a classic single-line ellipsis to multi-line clamping with `-webkit-line-clamp`.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Drag the slider to set how many lines to show before truncating.
- Copy the generated CSS into your stylesheet.
FAQ
- Does this work in every browser?
- Yes — it uses the now-standard `-webkit-line-clamp` property, which every modern browser supports.
- Is the single-line CSS different from the multi-line CSS?
- Yes. One line uses `text-overflow: ellipsis` with `white-space: nowrap`, while two or more lines switch to `-webkit-line-clamp` with `display: -webkit-box` — the tool generates the right set automatically.
- Can I show the full text on hover?
- Not with CSS alone. Add a `title` attribute or a small tooltip script alongside the clamp to reveal the complete text on hover.