How to handle CSS text overflow
How to Handle CSS Text Overflow
In web design, we often encounter situations where text content is too long and causes overflow. To address this issue, we can use CSS to control text overflow. This article will detail how to handle text overflow in CSS, including truncation, ellipsis, and line breaks.
1. Text Truncation
Text truncation occurs when text exceeds the width or height of a container, cutting off the excess text. We can use the text-overflow: ellipsis property to achieve text truncation and display ellipsis.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Truncation</title>
<style>
.truncate {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="truncate">This is a long text that will be truncated if it exceeds the container width.</div>
</body>
</html>
Output:
Result: When text exceeds the width of the container, an ellipsis is displayed.
2. Text Wrapping
Sometimes, we want text to automatically wrap when it encounters a line break, rather than overflowing to the next line. We can use the word-wrap: break-word property to achieve text wrapping.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Wrapping</title>
<style>
.wrap {
width: 200px;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="wrap">This is a long text that will wrap to the next line if it exceeds the container width.</div>
</body>
</html>
Output:
Result: When the text exceeds the width of the container, it will automatically wrap to the next line.
3. Hiding Text Overflow
Sometimes we want to hide text when it exceeds the container. We can use the overflow: hidden property to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Hidden</title>
<style>
.hidden {
width: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="hidden">This is a long text that will be hidden if it exceeds the container width.</div>
</body>
</html>
Output:
Result: When text exceeds the width of the container, it is hidden.
4. Displaying Ellipses When Text Overflows
In addition to displaying ellipsis when text is truncated, we can also use the overflow: hidden and text-overflow: ellipsis properties to display ellipsis when text overflows.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Ellipsis</title>
<style>
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="ellipsis">This is a long text that will show ellipsis if it exceeds the container width.</div>
</body>
</html>
Output:
Running result: When the text content exceeds the container width, an ellipsis will be displayed.
5. Displaying Custom Ellipses for Text Overflow
Sometimes we want to customize the ellipsis style. We can use the ::after pseudo-element to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Ellipsis</title>
<style>
.custom-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.custom-ellipsis::after {
content: '...';
position: absolute;
right: 0;
bottom: 0;
background: white;
}
</style>
</head>
<body>
<div class="custom-ellipsis">This is a long text that will display a custom ellipsis if it exceeds the container width.</div>
</body>
</html>
Output:
Result: When the text exceeds the container width, a custom ellipsis will be displayed.
6. Displaying a Tooltip for Text Overflow
Sometimes, we want to display a tooltip when the text overflows. We can use the title attribute to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Tooltip</title>
<style>
.tooltip{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="tooltip" title="This is a long text that will show tooltip if it exceeds the container width.">This is a long text that will show tooltip if it exceeds the container width.</div>
</body>
</html>
Output:
Running result: When the text content exceeds the container width, a tooltip will be displayed when the mouse hovers over the text.
7. Display scrollbars when text overflows
Sometimes we want to display scrollbars when text content overflows. We can use the overflow: auto property to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Scroll</title>
<style>
.scroll {
width: 200px;
white-space: nowrap;
overflow: auto;
}
</style>
</head>
<body>
<div class="scroll">This is a long text that will show scrollbar if it exceeds the container width.</div>
</body>
</html>
Output:
Result: When the text content exceeds the container width, a scroll bar will be displayed.
8. Displaying Multi-Line Ellipses When Text Overflows
Sometimes, we want to display multi-line ellipsis when text content exceeds the container height. We can use the -webkit-line-clamp property to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-line Ellipsis</title>
<style>
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Number of lines to show */
overflow: hidden;
}
</style>
</head>
<body>
<div class="multi-line-ellipsis">This is a long text that will show multi-line ellipsis if it exceeds the container height. This This is a long text that will display multi-line ellipsis if it exceeds the container height. </div>
</body>
</html>
Output:
Result: When the text exceeds the container height, multi-line ellipsis will be displayed.
9. Displaying a Gradient Effect When Text Overflows
Sometimes, we want to display a gradient effect when text overflows. We can use linear-gradient to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Gradient</title>
<style>
.gradient {
width: 200px;
white-space: nowrap;
overflow: hidden;
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
}
</style>
</head>
<body>
<div class="gradient">This is a long text that will show gradient effect if it exceeds the container width.</div>
</body>
</html>
Output:
Running Result: When the text content exceeds the container width, a gradient effect will be displayed.
10. Text Overflow Display Animation Effect
Sometimes we want to display animation effects when text content overflows. We can use CSS animations to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Animation</title>
<style>
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.animation {
width: 200px;
white-space: nowrap;
overflow: hidden;
animation: slide 5s linear infinite;
}
</style>
</head>
<body>
<div class="animation">This is a long text that will show an animation effect if it exceeds the container width.</div>
</body>
</html>
Output:
Result: When the text content exceeds the container width, an animation effect will be displayed.
This is a detailed introduction to CSS text overflow and sample code. By properly using CSS properties, we can achieve various text overflow effects, making web content more beautiful and easy to read.