Operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
There are two cases when the css setting exceeds the display ellipsis
Single line text overflow display ellipsis
Multiline text overflow display ellipsis
But the core code used is the same: you need to use "overflow: hidden;" to hide the excessive part, and then use "text overflow: ellipsis;" to display the ellipsis when the text exceeds.
overflow：hidden; If the content beyond the object size is not displayed, the excess part is hidden;
text-overflow：ellipsis; When the text object overflows, it displays..., of course, you can also set the attribute to clip not to display dots;
Implementation code
1. Single line text overflow display ellipsis
<! DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<style>
*{margin: 0px;padding: 0px;}
.box{width: 300px; height: 500px;margin: 50px auto;}
.overflow{
width:220px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class=”box”>
<p>
The css single line text exceeds the length, and the ellipsis is displayed
</p>
<p class=”overflow”>
The css single line text exceeds the length, and the ellipsis is displayed
</p>
</div>
</body>
</html>
design sketch:
How to set the ellipsis beyond display in css
2. Multiline text overflow display ellipsis
<! DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class=”box”>
If the css multiline text exceeds the length, an ellipsis is displayed; if the css multiline text exceeds the length, an ellipsis is displayed,
If the css multiline text exceeds the length, an ellipsis is displayed; if the css multiline text exceeds the length, an ellipsis is displayed.
</div>
</body>
</html>
