CSS Text Override Hide
CSS Text Overlap Hidden
In web development, text content often exceeds the container boundaries. If left unhandled, the excess text will disrupt the page layout. To solve this problem, we can use CSS to achieve the effect of text exceeding and hiding. This article will introduce in detail how to use CSS to achieve the effect of text exceeding and hiding.
1. Text Overflow Handling Methods
When text content exceeds the boundaries of its container, we can use the following methods to handle overflowing text:
- Hide overflowing text
- Show ellipsis
- Scroll to reveal overflowing text
In this article, we’ll focus on how to use CSS to hide overflowing text.
2. Hiding Text Overflow with CSS
We can control text overflow using the text-overflow property. This property must be used in conjunction with the overflow and white-space properties to be effective.
2.1 The text-overflow Property
The text-overflow property specifies how to handle overflowing text when it overflows its container. Commonly used property values include:
- clip: Clips text that overflows the container.
- ellipsis: Displays an ellipsis (…)
- string: Replaces overflowing text with a specified string.
2.2 overflow Property
overflow Property specifies whether to display scroll bars when content overflows the container. Common property values include:
- visible: Default value. Overflowing content will not be clipped and will appear outside the container.
- hidden: Overflowing content will be hidden.
- scroll: Displays a scroll bar so the user can scroll to view overflowing content.
2.3 white-space Property
white-space property specifies how to handle whitespace and line breaks within an element. Commonly used attribute values include:
- normal: Default value, collapses consecutive whitespace characters, and disables line breaks
- nowrap: Forces line breaks
- pre: Preserves whitespace characters and line breaks
3. Example Code
The following is an example code using CSS to achieve a text overhang effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of text beyond hiding</title>
<style>
.container {
width: 200px;
height: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be hidden when it exceeds the container width.
</div>
</body>
</html>
In the example code above, we create a div container, set a fixed width and height, and set the overflow: hidden, white-space: nowrap, and text-overflow: ellipsis properties. These settings cause text that exceeds the container width to be hidden and display an ellipsis.
4. Run Results
When you open the sample code above in a browser, you will see the following:
This is a long text that will be hidden when it exceeds the container width.
When the container width is limited to 200px, the text that exceeds the container width is hidden and an ellipsis is displayed.
5. Summary
Through this article, we learned how to use CSS to achieve the effect of hiding overflowing text. By properly setting the text-overflow, overflow, and white-space properties, we can easily control the style of overflowing text. In actual web development, we can choose appropriate property values to achieve different text processing effects as needed.