Skip to content

How to Make CSS Text-Overflow Work

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

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 the expected result.

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.