🔍 What is it?
- CSS
text-overflowproperty: - It is used to specify how overflowed content should be handled within an element that has limited space for text.
❓ How is it used?
- It is used to specify how overflowed content should be handled within an element that has limited space for text.
- The property can have values like
clip,ellipsis, orstring.
Why is it needed?
- It's needed to handle situations where text within an element exceeds the available space, providing control over how the overflowed text should be displayed or hidden.
Examples:
- Clip: The overflowed content is clipped and not displayed beyond the container's boundaries.
css
.container {
overflow: hidden;
text-overflow: clip;
white-space: nowrap; /* Ensures text does not wrap */
}
* Ellipsis: The overflowed content is truncated with an ellipsis (...) to indicate that it has been cut off.
css
.container {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* Ensures text does not wrap */
}
* String: The overflowed content is truncated with a custom string specified by the string value.
css
.container {
overflow: hidden;
text-overflow: '...';
white-space: nowrap; /* Ensures text does not wrap */
}