Text-overflow property
Last updated: 2026-09-13
text-overflow Text-overflow property
The text-overflow CSS property controls how text is displayed when it overflows its container. Its most common use, combined with overflow: hidden and white-space: nowrap, is to render overflowing single-line text with an ellipsis. It supports two modes: clip (truncate) and ellipsis (…), making it a standard tool for handling long text in UI design.
| Category | |
|---|---|
| Initial Value | clip |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
text-overflow: [ clip | ellipsis | <string> ]{1,2};⚙️ Values
| Value | Type | Description |
|---|---|---|
clip | ellipsis | Keyword | Text overflow handling: clip or ellipsis |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-overflow | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v10 |
| Supported in all major browsers | |||||
Important： text-overflow only works together with overflow: hidden (or scroll/auto) and white-space: nowrap; setting it alone has no effect.
Tip： Multi-line ellipsis requires -webkit-line-clamp together with display: -webkit-box and -webkit-box-orient: vertical, which are WebKit-specific properties.
❓ FAQ
QWhy is my text-overflow property not showing the ellipsis in CSS?
ACheck that overflow: hidden and white-space: nowrap are both set and the container has a definite width limit. Missing any of these conditions prevents the overflow ellipsis from being triggered.
QHow can I add an ellipsis to multi-line truncated text using CSS?
AStandard CSS only supports single-line ellipsis. For multiple lines, use -webkit-line-clamp to limit the line count together with display: -webkit-box and overflow: hidden; all major browsers support this today.
QHow do I write a single-line text ellipsis with the text-overflow property?
AThree properties must work together: white-space: nowrap to forbid wrapping, overflow: hidden to hide the overflow, and text-overflow: ellipsis to show the ellipsis. The container must also have a fixed or constrained width — all three conditions are required.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
white-space property
Control whitespace handling and wrapping.
overflow property
Control how overflowing content is handled.
