CSS Beyond Omission
CSS Overrun Ellipsis
In web development, text often overflows its container. To address this issue, CSS provides an overrun ellipsis method, allowing text that exceeds the container to be displayed as an ellipsis, thus maintaining a clean and aesthetically pleasing page. This article will detail several CSS overrun ellipsis methods and provide sample code for reference.
1. Using the text-overflow Property
The text-overflow property controls how text should be handled when it overflows its container. Common values are “clip”, “ellipsis”, and “string”. Among them, “ellipsis” means using ellipsis to indicate omitted text.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="ellipsis">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
2. Using the overflow property
In addition to the text-overflow property, you can also use the overflow property to achieve an overlap effect. By setting overflow to hidden, you can hide content that overflows the container.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.overflow {
width: 200px;
height: 50px;
overflow: hidden;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="overflow">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
3. Use the max-width property
By setting the max-width property, you can limit the maximum width of text content. When the text content exceeds the maximum width, it will be automatically omitted.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.max-width {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="max-width">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
4. Use Single-Line Text Overflow Ellipsis
If you want text to display on a single line and any excess text to be represented by ellipsis, you can use single-line text overflow ellipsis.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.single-line {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="single-line">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
5. Using Multi-Line Text Overflow Ellipse
Sometimes you need to handle overflow ellipsis on multiple lines of text. You can use a combination of the display: -webkit-box; and -webkit-line-clamp properties to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.multi-line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="multi-line">This is a long text that will be truncated with an ellipsis. ellipsis.</div>
</body>
</html>
Output:
6. Dynamically Calculate Ellipses Using JavaScript
Sometimes you need to dynamically calculate the position of ellipsis based on the actual length of the text. You can use JavaScript to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.dynamic-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
}
</style>
<script>
window.onload = function() {
var element = document.querySelector('.dynamic-ellipsis');
var text = element.innerText;
var maxLength = 20;
if (text.length > maxLength) {
element.innerText = text.substring(0, maxLength) + '...';
} };
</script>
</head>
<body>
<div class="dynamic-ellipsis">This is a long text that will be truncated dynamically.</div>
</body>
</html>
Output:
7. Using Pseudo-Elements to Implement Ellipsis
By using the ::after pseudo-element to achieve the effect of ellipsis, you can add an ellipsis after the text content.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.ellipsis-pseudo {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
}
.ellipsis-pseudo::after {
content: '...';
}
</style>
</head>
<body>
<div class="ellipsis-pseudo">This is a long text that will be truncated with an ellipsis using pseudo element.</div>
</body>
</html>
Output:
8. Implementing Ellipsis with Flex Layout
By using flex layout, you can achieve the effect of ellipsis in text content.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-ellipsis {
display: flex;
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-ellipsis">This is a long text that will be truncated with an ellipsis using flex layout.</div>
</body>
</html>
Output:
9. Using Grid Layout to Implement Ellipsis
Similar to flex layout, using grid layout can also achieve the effect of ellipsis in text content.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-ellipsis {
display: grid;
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-ellipsis">This is a long text that will be truncated with an ellipsis using grid layout.</div>
</body>
</html>
Output:
In addition to writing your own JavaScript code to implement ellipsis, you can also use existing JavaScript plugins to achieve the effect of ellipsis. For example, you can use the jQuery plugin ellipsis.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.ellipsis/dist/jquery.ellipsis.min.js"></script>
<style>
.js-ellipsis {
width: 200px;
border: 1px solid #ccc;
}
</style>
<script>
<span class="katex math inline">(document).ready(function() {</span>('.js-ellipsis').ellipsis();
});
</script>
</head>
<body>
<div class="js-ellipsis">This is a long text that will be truncated with an ellipsis using jQuery plugin.</div>
</body>
</html>
Output:
Conclusion
Through this article, we’ve explored several methods for overlapping in CSS and provided several sample code examples for your reference. Whether using the text-overflow, overflow, or max-width properties, or combining them with JavaScript for dynamic ellipsis, you can achieve text ellipsis. Using pseudo-elements, flex layouts, grid layouts, or JavaScript plugins is also an effective way to achieve ellipsis.