Get my e-book focusing on CSS3 and
modern web UI development.
dig into web UI development
Last modified: 27. 2. 2016
Text overflow is a way to limit text that exceeds the width of the element and to insert an ellipsis (three dots “…”).
text-overflow: ( clip | ellipsis | <_string_> );
text-overflow: ellipsis in my lectures, I always get two
reactions. One half of the audience is bored, saying: “Hm, I have been using
this for two years already…” And the other half? Enthusiastically taking notes:
“I must use this first thing tomorrow!”
However, the catch when using the
ellipsis value is that it will apply to any
single line of text in block elements and three dots (“…”) will be shown if the
line overflows. Nevertheless, it is still a time saver.
Imagine a navigation bar where you do not want the text to be wrapped onto the next line. Plus, you do not know its length or the width of the box it is in.
In such a case, just extend the
ellipsis declaration with two other
declarations that will ensure that the text stays on one line:
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
Try resizing the browser window at this example URL: cdpn.io/e/FeLkJ.
text-overflow: ellipsis is supported in all browsers, even in IE6, so there is
no problem using it.