CSS text-overflow

The CSS text-overflow property specifies how overflowed content that is not displayed should be indicated to the user. It can be used to provide ellipsis (...) or fade out the text when it exceeds the specified width of its container.

There are three possible values for the text-overflow property:

1. clip: This value clips the text when it overflows the element's box.
2. ellipsis: This value displays an ellipsis (...) to represent clipped text.
3. fade: This value displays a fade effect to indicate that the text is overflowing.

Let's see some examples to understand how text-overflow works:

In the example above, the text is set to overflow hidden with the property text-overflow: ellipsis;, resulting in the text being truncated and an ellipsis (...) being displayed at the end when it overflows the container.

Now, let's look at an example using the fade value:

In this example, the text will fade out gradually as it overflows the container, giving a visual indication to the user.

You can also use the clip value to simply clip the text without any indication:

With text-overflow: clip;, the text will be clipped without any indication of overflow.

Experiment with these different options to see how the text-overflow property can be used to handle overflowing text in your designs.