CSS text ellipsis
CSS Text Ellipses
In web design, text often exceeds the width of its container. In these cases, ellipses are needed to partially display the content to maintain the page’s aesthetics and clutter. In CSS, we can use various properties to create ellipses. This article will detail how to use CSS to achieve this effect.
Single-Line Ellipses
First, let’s look at how to create an ellipsis effect for single-line text. When the text content exceeds the container width, we can use the text-overflow: ellipsis property to display an ellipsis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Line Ellipsis</title>
<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:
In the example above, we define a div element with the class name ellipsis. We set white-space: nowrap to prevent the text from wrapping, overflow: hidden to hide the text that exceeds the container, and text-overflow: ellipsis to display the ellipsis. The ellipsis appears when the text exceeds the container width.
Multi-Line Ellipses
In addition to single-line ellipsis, sometimes we also need to create an ellipsis effect for multiple lines of text. In CSS3, we can use the -webkit-line-clamp property to achieve this effect.
<!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;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="multi-line-ellipsis">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
In the example above, we define a div element with a class name of multi-line-ellipsis, set display: -webkit-box and -webkit-box-orient: vertical to align the text vertically, and overflow: <code>hidden hides the part that exceeds the container, text-overflow: ellipsis displays an ellipsis, and -webkit-line-clamp: 3 indicates that a maximum of 3 lines of text can be displayed. When the text content exceeds 3 lines, an ellipsis will be displayed.
Conclusion
Through this article, we learned how to use CSS to achieve the ellipsis effect for text, including single-line ellipsis and multi-line ellipsis. In actual web design, choosing the appropriate ellipsis effect according to your needs can make the page more beautiful and neat.