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:
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: