Skip to content

How CSS Make Text-Overflow Work

text-overflow: ellipsis

If you have a very long unbroken word in a web page with limited width, it will output an unwrapped line in the browser by default. Luckily, there is a CSS property called "text-overflow" that can remove the overflowed letters. You can try the following sample code:

<div style="border: 1px solid black; width: 200px; text-overflow: ellipsis;">
A_very_long_unbroken_word_A_very_long_unbroken_word
</div>

But the output will be like this:

A_very_long_unbroken_word_A_very_long_unbroken_word

overflow: hidden

The above word is not ellipsized as expected and it overflows the boundary, why? The reason is that "text-overflow" cannot work alone, you should ADD another property "overflow" as well.

<div style="border: 1px solid black; width: 200px; text-overflow: ellipsis; overflow: hidden;">
A_very_long_unbroken_word_A_very_long_unbroken_word
</div>

The output will be like this:

A_very_long_unbroken_word_A_very_long_unbroken_word

This is what we expect result.

white-space: nowrap

Another presentation you might want to make is to show a sentence in a single line with limited width, in such case, you must add additional CSS property called "white-space":

<div style="border: 1px solid black; width: 200px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
It could a number of reasons to recreate a database on another machine.
</div>

The output will be like this:

It could a number of reasons to recreate a database on another machine.

Leave a Reply

Your email address will not be published. Required fields are marked *