CSS goes beyond display…
CSS Overrun…
In web development, we often encounter situations where text content is too long and exceeds the boundaries of its container. For aesthetics and a better user experience, we can use CSS to handle this situation, displaying the excess content as ellipsis or other methods instead of simply overflowing the container.
1. Display ellipsis when text overflows
1.1 Display ellipsis when text overflows a single line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single-line text overflow displays ellipsis</title>
<style>
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="ellipsis">geek-docs.com is a high-quality technical documentation website that provides rich learning resources. </div>
</body>
</html>
Output:
1.2 Multi-line text overflow displays ellipsis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-line text overflow displays ellipsis</title>
<style>
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="ellipsis">geek-docs.com is a high-quality technical documentation website that provides a wealth of learning resources. </div>
</body>
</html>
Output:
2. Image overflow displays ellipsis
2.1 Image overflow displays ellipsis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture overflow shows ellipses</title>
<style>
.ellipsis {
width: 200px;
height: 200px;
overflow: hidden;
}
.ellipsis img {
width: 100%;
height: auto;
object-fit: cover;
}
</style>
</head>
<body>
<div class="ellipsis">
<img src="https://cdn.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/css-ellipsis-https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg" alt="geek-docs.com">
</div>
</body>
</html>
Output:
3. Table overflow displays ellipsis
3.1 Table overflow displays ellipsis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table overflow displays ellipsis</title>
<style>
table {
width: 200px;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table>
<tr>
<th>Title</th>
<th>Content</th>
</tr>
<tr>
<td>geek-docs.com</td>
<td>is a high-quality technical documentation website that provides rich learning resources. </td>
</tr>
</table>
</body>
</html>
Output:
4. Overflow Display Prompt Message
4.1 Overflow Display Prompt Message
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Display Prompt Message</title>
<style>
.ellipsis {
width: 200px;
overflow: hidden;
position: relative;
}
.ellipsis::after {
content: '...';
position: absolute;
right: 0;
bottom: 0;
background: white;
padding: 0 5px;
}
</style>
</head>
<body>
<div class="ellipsis" title="geek-docs.com is a high-quality technical documentation website that provides a wealth of learning resources."">
geek-docs.com is a high-quality technical documentation website that provides a wealth of learning resources.
</div>
</body>
</html>
Output:
Through the above examples, we can flexibly use CSS to handle the overflow display of elements such as text, https://coder-cafe.com/wp-content/uploads/2025/09/images, and tables, improving the aesthetics and user experience of the page.