CSS text-overflow Property
The CSS text-overflow property specifies how the overflowing inline text should be signaled to the user. It is one of the CSS3 properties.
The text-overflow property is commonly used with the overflow property set to hidden and white-space set to nowrap, but it can function with other values depending on the layout context.
In CSS3, the specification allows using a custom string. A string value can contain whitespace, or you can use any other custom string. In older versions of the specification, it was noted that a URL to an image could be used for the ellipsis, but this was dropped.
| Initial Value | clip |
|---|---|
| Applies to | Block container elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.textOverflow = "ellipsis"; |
Syntax
CSS text-overflow values
css
text-overflow: clip | ellipsis | string | initial | inherit;Example of the text-overflow property:
CSS text-overflow code example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #666;
}
</style>
</head>
<body>
<h2>Text-overflow property example</h2>
<h3>text-overflow: ellipsis</h3>
<div>Lorem Ipsum</div>
</body>
</html>Result
Example of the text-overflow property with the "clip", "ellipsis" and "initial" values:
CSS text-overflow clip, ellipsis values example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.element1 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #666;
}
div.element2 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #666;
}
div.element3 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: initial;
border: 1px solid #666;
}
</style>
</head>
<body>
<h2>Text-overflow property example</h2>
<h3>text-overflow: clip</h3>
<div class="element1">Lorem Ipsum</div>
<h3>text-overflow: ellipsis</h3>
<div class="element2">Lorem Ipsum</div>
<h3>text-overflow: initial</h3>
<div class="element3">Lorem Ipsum</div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
clip | Cuts the text at the limit of the content area; truncation can happen in the middle of a character. This is the default value. | Play it » |
ellipsis | Renders an ellipsis ("...") to show the clipped text. Note: This only works on a single line of text. | Play it » |
<string> | Renders the given string to represent the clipped text. The string is displayed inside the content area. Note: Limited support in older browsers. | Play it » |
initial | Makes the property use its default value. | Play it » |
inherit | Inherits the property from its parent element. |
Practice
The text-overflow property works if