text-overflow property specifies how to display the content that overflows its container element.
For example, consider that there is some long text in a container div. Now, if the text is prevented from wrapping or breaking lines (as in case of
white-space: nowrap), or a word is too long to fit within the container's width, then the text overflows the container as shown in the following demo.
See the Pen Text overflowing container by Aakhya Singh (@aakhya) on CodePen.
In the above demo, the overflowing text does not get hidden. So for the
text-overflow property to work, the content needs to be hidden from the view first. This is achieved using the overflow property by giving any value other than
overflow: hidden will give the following result.
See the Pen Hiding overflowing text by Aakhya Singh (@aakhya) on CodePen.
Now comes the role of the
text-overflow property. This property is used to display characters or strings to represent the hidden text.
You will understand the use of this property better with examples. But before that, have a look at the values that this property can take.
clip : This is the default value. Clips (cuts off) the overflowing text.
ellipsis : Displays an ellipsis character (U+2026), or three dots "...", to show that there is more content that has been clipped. If there is not much space to display the ellipsis character, then it is also clipped.
string : Displays the given string to represent the clipped content. If there is not much space, the string can also be clipped.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Have a look at the characters which are added on giving different values to the property.
text-overflow: clip; /* default value */ text-overflow: ellipsis; /* adds ... */ text-overflow: "(...)"; /* adds (...) string */ text-overflow: "..." "..."; /* the first value specifies the overflow for the left end of the line and the second value specifies the overflow for the right end */ text-overflow: " "; /* adds a white space */
To be noted
text-overflow property will be effective only when the content is overflowing a block container in its progression direction. For
text-overflow property to work, you need an overflowing text that has been hidden from the user's view. An example is given below.
white-space: nowrap; overflow: hidden; /* this can be any value other than 'visible' */
The following demo shows the effect of different
See the Pen text-overflow property values by Aakhya Singh (@aakhya) on CodePen.
For all the other browsers which don't support the string values, the above demo will give the following result.
This property is supported in almost all the major browsers, except that the string and the two-input values are supported only in a few browsers like Firefox. Use the prefix
-o- to get full support in Opera.