CSS Text Truncate Generator
Generate single-line and multi-line ellipsis CSS with a live preview
This tool generates the CSS you need to cleanly cut off long text with an ellipsis (…). It covers both single-line truncation using text-overflow and multi-line truncation using -webkit-line-clamp. It's useful for developers and designers who need card titles, lists, or preview text to stay at a consistent height. Everything runs locally in your browser, so your text is never sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Choose the truncation type (single-line or multi-line)
- For multi-line, use the slider to set the maximum number of lines
- Drag the container width to check the result in the live preview
- Copy the generated CSS with a single click
FAQ
- Does -webkit-line-clamp work in every browser?
- It's supported in most modern browsers including Chrome, Edge, Safari, and Firefox. Since it originated as a WebKit-prefixed property, though, it's worth planning a fallback style if you need to support older browsers.
- What's the difference between single-line and multi-line truncation?
- Single-line truncation uses overflow, text-overflow, and white-space to force the text onto one line and cut it there. Multi-line truncation uses -webkit-line-clamp to hide anything past the line count you set and add an ellipsis.
- Are there cases where multi-line truncation (line-clamp) doesn't apply depending on the container?
- Yes — -webkit-line-clamp only works correctly alongside display: -webkit-box. If the parent element is a flex or grid container, or the container doesn't have a clear width, the line-wrapping logic can get thrown off and the truncation may not apply properly. It's safest not to change the display property in the generated code on your own.