CSS Beyond…
CSS Beyondâ¦
In web development, content often exceeds its container. In these cases, you need to use CSS to handle this. This article details how to use CSS to handle overflowing text, including text overflowing, image overflowing, and box overflowing.
Text Overflow
1. Displaying Ellipses When Text Overflows
When text overflows its container, you can use the text-overflow: ellipsis property to display an ellipsis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow</title>
<style>
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
Run result: This is a long text that will be truncated with an ellipsis.
2. Text overflow wraps to display an ellipsis
If you want text to wrap to display an ellipsis after overflowing, use the white-space: normal property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow</title>
<style>
.container {
width: 200px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
Run result: This is a long text that will be truncated with an ellipsis.
Image Overflow
3. Image Overflow Hide
When an image exceeds its container, use the overflow: hidden attribute to hide the overflow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg" alt="Geek Docs">
</div>
</body>
</html>
Output:
4. Image Overflow Stretch
If you want an image to stretch to fill its container when it overflows, use the object-fit: cover property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg" alt="Geek Docs">
</div>
</body>
</html>
Output:
Box Overflow
5. Box Overflow Hidden
When a box’s contents exceed its container, the overflow: hidden property can be used to hide the overflow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
.box {
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Output:
6. Box Overflow Scrolling
If you want to scroll when a box overflows, use the overflow: auto property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: auto;
}
.box {
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Output:
Table Overflow
7. Table Overflow Hidden
When table content exceeds its container, you can use the overflow: hidden property to hide the overflow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
table {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td> </tr>
</table>
</div>
</body>
</html>
Output:
8. Table Overflow Scrolling
If you want to scroll when the table content overflows, you can use the overflow: auto property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: auto;
}
table {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td> </tr>
</table>
</div>
</body>
</html>
Output:
List overflow
9. List overflow hidden
When the list content exceeds the container, you can use the overflow: hidden property to hide the overflow portion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
ul {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li> </ul>
</div>
</body>
</html>
Output:
10. List Overflow Scrolling
If you want to scroll when the list content overflows, you can use the overflow: auto property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: auto;
}
ul {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li> </ul>
</div>
</body>
</html>
Output:
Inline Elements Overflow
11. Inline Elements Overflow Hidden
When inline element content exceeds its container, you can use the overflow: hidden property to hide the overflow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Element Overflow</title>
<style>
.container {
width: 200px;
height: 50px;
overflow: hidden;
}
span {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<span>This is a long inline element that will be truncated with an ellipsis.</span>
</div>
</body>
</html>
Output:
12. Displaying an ellipsis when overflowing inline elements
If you want an ellipsis to appear when overflowing inline elements, use the white-space: normal property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Element Overflow</title>
<style>
.container {
width: 200px;
height: 50px;
overflow: hidden;
}
span {
white-space: normal;
}
</style>
</head>
<body>
<div class="container">
<span>This is a long inline element that will be truncated with an ellipsis.</span>
</div>
</body>
</html>
Output:
Multi-line Text Overflow
13. Multi-line Text Overflow: Displaying Ellipses
When multi-line text overflows its container, you can use the -webkit-line-clamp and display: -webkit-box properties to display an ellipsis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-line Text Overflow</title>
<style>
.container {
width: 200px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
This is a long multi-line text that will be truncated with an ellipsis. This is a long multi-line text that will be truncated with an ellipsis. ellipsis.
</div>
</body>
</html>
Output:
14. Multi-line text overflows and displays ellipsis
If you want multi-line text to wrap and display ellipsis after overflowing, you can use the display: -webkit-box and -webkit-line-clamp properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-line Text Overflow</title>
<style>
.container {
width: 200px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
This is a long multi-line text that will be truncated with an ellipsis. This is a long multi-line text that will be truncated with an ellipsis. ellipsis.
</div>
</body>
</html>
Output:
Absolutely positioned elements overflow
15. Absolutely positioned elements overflow hidden
When the content of an absolutely positioned element exceeds its container, you can use the overflow: hidden property to hide the overflow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Absolute Position Element Overflow</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute"></div>
</div>
</body>
</html>
Output:
16. Absolutely Positioned Elements Overflow Scrolling
If you want to scroll when the content of an absolutely positioned element overflows, you can use the overflow: auto property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Absolute Position Element Overflow</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
overflow: auto;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute"></div>
</div>
</body>
</html>
Output:
The above is sample code for handling some common situations where content overflows its container. By properly using CSS properties, you can effectively control the display of content and improve the user experience.