The text-overflow property sets how overflowing text is handled.
Options include clip, ellipsis, and others.
white-space:nowrap and overflow:hidden are required to make it work.
A narrow container with text-overflow set to ellipsis.
The ellipsis (...) indicate that some text is hidden.
This content is too wide for the container.
<style>
.overflow {
width: 250px;
border: 2px solid lightblue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<p class="overflow">
This content is too wide for the container.
</p>
text-overflow: clip | ellipsis | string |
initial | inherit;
| Value | Description |
|---|---|
| clip | Default. Clip the text and make the rest invisible. |
| ellipsis | Add an ellipsis (...) to the clipped text |
| string | Adds a custom string to represent clipped text. Only supported by Firefox. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different text-overflow values.
This content is too wide for the container and a large portion is not visible.
<style>
.overflow-example {
width: 330px;
padding: 15px;
border: 2px solid lightblue;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
<p class="overflow-example">
This content is too wide for the container
and a large portion is not visible.
</p>
This table shows when text-overflow support started for each browser.
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
7.0 | Sep 2011 |
 IE/Edge
|
6.0 | Aug 2001 |
 Opera
|
11.0 | Dec 2010 |
 Safari
|
3.1 | Mar 2008 |
