To hide overflow text in CSS, you can use a combination of the overflow
property and other properties to control the container's dimensions and text presentation. Here are some common scenarios and how to handle them:
Basic Overflow Hiding:
Use the overflow
property set to hidden
to hide any overflowing content.
.text-container {
width: 200px; /* or any desired width */
height: 50px; /* or any desired height */
overflow: hidden;
}
Text Ellipsis for Single Line Text:
If you want to show an ellipsis (...
) when the text overflows its container, you can use the text-overflow
property set to ellipsis
.
.ellipsis-text {
width: 200px; /* or any desired width */
white-space: nowrap; /* ensures text stays on a single line */
overflow: hidden;
text-overflow: ellipsis;
}
Clamping Multi-line Text:
For multi-line text, there isn't a native CSS-only solution for ellipsis. However, you can achieve a similar effect using the -webkit-line-clamp
property, which works in most modern browsers but is still considered a webkit-specific feature.
.clamp-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* limits to 3 lines */
overflow: hidden;
}
This method will limit the text to the specified number of lines and hide the rest. Note that this method requires the container to use -webkit-box
or -webkit-flex
display.
Remember, when hiding overflow text, ensure that you're not making essential content inaccessible to users. If the content is crucial, consider providing a way for users to access the full content, such as expanding the container or navigating to a detailed view.