The text-overflow property

The text-overflow property adds an ellipsis to the end of trimmed text to indicate that the text did not fit in a block and was trimmed.

For the property to work, the text must be trimmed via the overflow or the overflow-x property in the hidden, auto or scroll value. If visible is set (and it is by default) - text-overflow will not work.

Syntax

selector {
	text-overflow: ellipsis | clip;
}

Values

Value	Description
`ellipsis`	Adds an ellipsis to the end of a trimmed text.
`clip`	Does not add an ellipsis at the end (this is the default, needed to override the property if necessary).

Default value: clip.

Example . Overflowing text

In this example, a very long word will not fit into the container and will fall outside its boundaries. No cut off occurs:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur anothervvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

Example . Let's add the overflow property

Now everything that has gone beyond the boundaries of the container will simply be cut off:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur anothervvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

Example . The ellipsis value

Now, in addition to the overflow property, let’s also add text-overflow in the ellipsis value. An ellipsis will be added to the end of the trimmed text:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur anothervvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Example . With scroll bars

If you set overflow: auto and text-overflow: ellipsis, the scrollbar will appear, but the ellipses will still be added. Try scrolling the scrollbar in the example:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur anothervvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Example . If there are no very long words

If there are no words so long that they extend beyond the borders of the container, then trimming will not occur (nothing will extend). Look at the following example:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Example . One line text

However, there are situations when we want text to be cut off if it is too long (text in general, not individual words) and not wrap to the next line. This is done by adding the white-space property in the nowrap value, which will prevent text wrapping to another line. Look at the example, now the text is cut off:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Example . Width in percentage

If you set a block width in %, then cropping will also work correctly:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur anothervvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}