CSS text-overflow property is used in situations when the text inside an element is too long and we want only a small part of it to show the user and the remaining part we want to replace with a string such as ‘…’, ‘…more’, ‘…read more’, etc.
The text-overflow property only works with the following two properties:
- overflow: hidden;
- white-space: nowrap;
Example:
.p1{
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
}
.p2{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.p3{
text-overflow: '...Read More';
overflow: hidden;
white-space: nowrap;
}
CSS Syntax
The text-overflow property has the following syntax:
text-overflow: clip|ellipsis|custom_string|initial|inherit;
Property Values
The text-overflow property accepts the following values:
| clip | The overflowed text is clipped. This is the default value. |
| ellipsis | The overflowed text is replaced with the (“…”) string. |
| custom_string | The overflowed text is replaced with the specified custom string such as ‘…more’, ‘…read more’, etc. |
| initial | Sets the text-overflow property to its default value(clip). |
| inherit | Inherits the text-overflow property from the parent element. |
General Info
| Default Value | clip |
| Inherited | No |
| JavaScript Usage | element.style.textOverflow = “ellipsis” |
