text-overflow

The text-overflow property adds a ternary dot at the end of the trimmed text to signify that the text did not fit in the block and was trimmed.

Initial Value clip
Applies to Block elements
Inheritance no
Animation discrete

The text-overflow property specifies how to represent text overflowing from a line. It does not control the overflow of content from an element or change the overflow. It only defines how the text in such a state should be presented.

Typically, text that does not fit within the dimensions of an element will be hidden, as if it were cut off. The text-overflow property can be used to provide a marker in such situations to indicate the presence of the rest of the text.

Note: For this property to work, the text must be cropped using the overflow property or overflow-x property with hidden, auto, or scroll values. If it is set to visible (and it is by default) – text-overflow will not work.

Syntax

/* Keyword values */

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: ellipsis clip;
text-overflow: ellipsis ellipsis;

/* Global values */

text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: unset;

Description

valuewhat it does
clipDefault value. The text is cut off.
ellipsisAn ellipsis (“…”) is displayed to represent truncated text.
lineThe specified string is displayed to represent the truncated text.
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

Here is an example of what will happen when overflow: visible; is applied to a container that has a specific width.

Duis sed nibh varius, volutpat diam vulputate, rhoncus odio. Duissednibhvarius,volutpatdiamvulputate,rhoncus odio. Integer a dolor pretium, gravida nunc id, bibendum lectus. Vestibulum mattis pretium cursus.

CSS & HTML

<div id="demo1">
Duis sed nibh varius, volutpat diam vulputate, rhoncus odio. Duissednibhvarius,volutpatdiamvulputate,rhoncus odio. 
Integer a dolor pretium, gravida nunc id, bibendum lectus. 
Vestibulum mattis pretium cursus.
</div>

#demo1 {
	width: 180px;
	overflow: visible;
	border: 1px solid blue;
}

Let’s go ahead and add overflow: hidden; to this example and see what happens.

Duis sed nibh varius, volutpat diam vulputate, rhoncus odio. Duissednibhvarius,volutpatdiamvulputate,rhoncus odio. Integer a dolor pretium, gravida nunc id, bibendum lectus. Vestibulum mattis pretium cursus.
#demo2 {
	width: 180px;
	overflow: hidden;
	border: 1px solid blue;
}

And finally, let’s apply text-overflow: ellipsis; to see how this property affects the overflowing text.

Duis sed nibh varius, volutpat diam vulputate, rhoncus odio. Duissednibhvarius,volutpatdiamvulputate,rhoncus.
#demo3 {
	width: 250px;
	overflow: hidden;
    text-overflow: ellipsis;
	border: 1px solid blue;
}

The three small dots ... is where the text breaks off (relative to container width), and an overflow is applied.