Text overflow
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (…), or display a custom string.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 7 | 1.3 | 18 | 1 | |
clip | 1 | 12 | 7 | 1.3 | 18 | 1 |
ellipsis | 1 | 12 | 7 | 1.3 | 18 | 1 |
two value syntax Two-value syntax | | | 9 | | | |
| Other | ||||||
| The SVG text-overflow attribute specifies how text content block elements render when text overflows line boxes. This can happen, for example, when the white-space attribute or CSS white-space property has the value nowrap. The property does not apply to pre-formatted text or text situated on a path. | 1 | 12 | 7 | 1.3 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Until Firefox 10, handling of `text-overflow` on blocks with inline overflow on both horizontal sides was incorrect. Before Firefox 10, if only one value was specified (such as `text-overflow: ellipsis;`), text was ellipsed on both sides of the block, instead of only the end edge based on the block's text direction.
Notes 1 item(s)
Implementation note
- Until Firefox 10, handling of `text-overflow` on blocks with inline overflow on both horizontal sides was incorrect. Before Firefox 10, if only one value was specified (such as `text-overflow: ellipsis;`), text was ellipsed on both sides of the block, instead of only the end edge based on the block's text direction.
Syntax
CSS
/* Truncate to one line */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Truncation of multiple lines (-webkit-line-clamp) */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}Live demo
Use cases
-
Using Text overflow
The text-overflow CSS property sets how hidden overflow content is signaled to users.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.