The 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 visible. Giving 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.
CSS
text-overflow: value;
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.
Values
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
The 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' */
Examples
The following demo shows the effect of different text-overflow values.
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.
Browser Support
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.
