The text-overflow CSS property is used to control how text is displayed when it overflows its container’s boundaries. It allows you to specify how the excess text should be handled and whether an ellipsis should be displayed to indicate the truncation of the text.
The text-overflow property accepts the following values:
-
clip: This is the default value. The text is clipped and hidden when it overflows the container. No ellipsis is displayed, and the clipped text is not visible. -
ellipsis: An ellipsis (...) is added to the end of the text when it overflows the container. This indicates that the text has been truncated. The ellipsis is displayed only if the text is actually truncated. -
fade: The text gradually fades out when it overflows the container. This creates a fading effect as the text approaches the container’s boundaries. The fading effect may not be supported by all browsers.
Here’s an example:
.container {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
In this example, the .container class is used to create a container with a fixed width and overflow: hidden to hide any overflowing text. The text-overflow: ellipsis property is applied to indicate that an ellipsis should be added to the end of the text when it overflows the container.
It’s important to note that the text-overflow property is typically used in conjunction with other CSS properties, such as white-space: nowrap and overflow: hidden, to achieve the desired effect. These properties ensure that the text is displayed on a single line and any overflow is hidden.
The text-overflow property is commonly used when you have limited space available to display text and need to indicate that the text has been truncated. It provides a visual clue to the user that there is more text beyond the visible area.