CSS Text Truncate Generator
Generate single- or multi-line text truncation CSS with live preview
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool generates ready-to-use CSS for truncating long text with an ellipsis (…), either on a single line using text-overflow or across multiple lines using -webkit-line-clamp. It's handy for developers and designers who need to keep card titles, list items, or preview snippets at a fixed height. Everything runs in your browser, so no text is sent to any server.
How to use
- Choose the truncation mode: single-line or multi-line
- For multi-line, drag the slider to set the maximum number of lines
- Adjust the container width and check the live preview
- Copy the generated CSS with one click
FAQ
- Does -webkit-line-clamp work in every browser?
- It's supported in all modern browsers (Chrome, Edge, Safari, Firefox), but it originated as a WebKit-prefixed property, so consider a fallback for very old browsers.
- What's the difference between single-line and multi-line truncation?
- Single-line uses overflow, text-overflow and white-space to cut off text on one line, while multi-line uses -webkit-line-clamp to limit text to a set number of lines before adding an ellipsis.