What is The text-overflow Property?
The text-overflow CSS property controls how overflowed text that does not fit within its container is displayed. It allows you to specify whether the text should be clipped, display an ellipsis (...), or use a custom string.
This guide provides a comprehensive overview of the text-overflow property, including its values, syntax, browser support, and practical examples to help you manage text overflow effectively.
Understanding Text-overflow Values
The text-overflow property accepts several values, each with a distinct effect:
- clip: This is the default value. The text is clipped at the container's boundary and is not accessible.
- ellipsis: An ellipsis (...) is displayed to represent the clipped text. This is commonly used to indicate that the text continues beyond the visible area.
- string: A custom string (e.g., '…', '>>') is displayed to represent the clipped text.
- initial: Sets the property to its default value.
- inherit: Inherits the property value from its parent element.
Implementing Text-overflow Syntax and Usage
To use text-overflow, you must combine it with other CSS properties, particularly white-space and overflow:
`css
div {
white-space: nowrap; /* Prevents text from wrapping to the next line */
overflow: hidden; /* Hides any text that overflows the container */
text-overflow: ellipsis; /* Displays an ellipsis (...) for clipped text */
}
`
In this example, the white-space: nowrap and overflow: hidden properties ensure that the text does not wrap and is hidden if it overflows. text-overflow: ellipsis then adds the ellipsis to show that the text continues.
“text-overflow is a powerful tool for managing how overflowing text appears to users, providing better user experience.
Web Development Expert
Interactive Examples
Test and Experiment with CSS Text Overflow
Ellipsis Preview
See how the ellipsis (...) is used in different scenarios.
Hover Effect Demo
Test the hover effect to reveal the full text.
Browser Support for text-overflow
The text-overflow property is widely supported across all modern browsers. Here's a quick reference:
- Chrome: 4+
- Edge: 12+
- Firefox: 7+
- Safari: 3.1+
- Opera: 11+
Ensure the versions are compatible with your target audience’s browser preferences.
Practical Text-overflow Examples
Ellipsis Example:
`html
`This example displays the text with an ellipsis when it exceeds the container's width.
Hover Effect Example:
`html
``css
.hover-text:hover {
overflow: visible;
white-space: normal;
}
`
This code shows the full text on hover, which is helpful to the user.