text-overflow
How text that does not fit is cut: abruptly or with an ellipsis.
Syntax
text-overflow: ellipsis;Values
| Parameter | Type | Description |
|---|---|---|
| clip | keyword | Cut at the edge (the default). |
| ellipsis | keyword | Cut with `…` at the end. |
Examples
An ellipsis on one line needs three properties together:
<style>
.name {
width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid lightgray;
}
</style>
<p class="name">A very long product name that does not fit</p>Cutting after several lines with -webkit-line-clamp:
<style>
.clamp {
width: 220px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
<p class="clamp">This description is cut after the second line, and an ellipsis shows that there is more text that does not fit.</p>Notes
text-overflow works only together with overflow: hidden and text that cannot wrap (white-space: nowrap). The -webkit- prefix in the multi-line version is required, but it works in all browsers.
See also
- white-space — How spaces and line breaks in the source are handled and whether lines may wrap.
- overflow — What to do with content that does not fit into the element.
Related recipes
In the tutorial
- Overflow and layers — What to do when content does not fit into a block — overflow, scrolling, an ellipsis — and how z-index decides which element lies on top.