text-overflow Property in CSS

• The `text-overflow` property in CSS is used to control how overflowing text is displayed within a container when it exceeds its available width or height. It allows you to specify whether the text should be clipped, displayed with an ellipsis when it overflows the container.

• The `text-overflow` property can be applied to block-level elements such as `<div>` or inline elements such as `<span>`. It works in conjunction with the `overflow` property, which determines how the content flows outside the container.

Here are the possible values for the `text-overflow` property:

• clip (default): The overflowing text is simply clipped, and the excess content is not visible. No ellipsis or other indicator is displayed.

• ellipsis: The overflowing text is truncated with an ellipsis ("...") at the end to indicate that there is more content. This is a common way to handle text overflow when there is limited space.

To use the `text-overflow` property, you need to make sure that the following conditions are met:

• The element must have a specified width or height, either explicitly or through the use of CSS properties like `max-width` or `max-height`.

• The `white-space` property should be set to `nowrap` to prevent the text from wrapping onto a new line.

Here's an example that demonstrates the usage of `text-overflow`:

    .div-content {

        width: 500px;

        text-overflow: ellipsis;

        overflow: hidden;

        white-space: nowrap;

    }

• In the above example, the text within the container will be truncated with an ellipsis if it exceeds the container's width of 500 pixels.

• It's worth noting that the `text-overflow` property only works for single-line text. If you have multi-line text and want to handle overflow, you may need to use other techniques such as setting a fixed number of lines or using JavaScript to handle the truncation.