text-overflow
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 works if the overflow property is set to “hidden”, and white-space is set to “nowrap”.
In CSS3, the specification allows using a custom string. White space, which is considered a string or any other custom string can be used. In the old version of the specification, it was noted that we could use an URL to an image for the ellipsis, but it was dropped.
| 类目 | 类目 |
|---|---|
| Initial Value | clip |
| Applies to | Block container elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.textOverflow = “ellipsis”; |
Syntax
Syntax
text-overflow: clip | ellipsis | string | initial | inherit;
Example of the text-overflow property:
<!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:
<!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
Values
| Value | Description | Play it |
|---|---|---|
| clip | Cuts the text at the limit of the content area, the truncation can happen in the middle of a character. This is the default value of this property. | Play it » |
| ellipsis | Renders an ellipsis ("…") to show the clipped text. | Play it » |
| <string> | Renders the given string to represent the clipped text. The string is displayed inside the content area. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |