The text-overflow property is a useful one that is used to indicate how to handle text overflow. Text overflow occurs when the text or content of an element is too big for the space of the container, meaning that it overflows from its boundaries. It’s a really great way to handle the sometimes sloppy look over overflowing text.
The property takes five different values. Clip is the default value, and that will clip the text, meaning that any overflow isn’t visible outside of the container element. Ellipses clips the text but adds an ellipses (…) to the end of the clipped text to indicate that there is, in fact, more text to be show, it just isn’t visible currently. The string value replaces the clipped text with a string of your choice. The other two values are initial, which sets the property to the default value, and inherit, which tells the property to inherit its value from the parent elements.
Here’s how it would look if you wanted to set the value of the property to ellipses:
p{
text-overflow: ellipses;
}
There is always the option of having the text overflow clipped with (or without) an ellipses and using CSS’s hover pseudo-selector to make sure the overflow visible on hover.