In this chapter we will give you a detailed description of how CSS makes the text overflow section display the ellipsis method. We hope to help you.
One: single-line text overflow display ellipsis ... (the ellipsis is displayed for more than the part of the caption ...) ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How does CSS show an ellipsis in the text overflow section? Single line exceeded</title>
<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>
Css implements single line text over length display ellipsis
</p>
<p class="overflow">
Css implements single line text over length display ellipsis
</p>
</div>
</body>
</html>
which, white-space:nowrap; indicates that the text does not wrap, and continues on the same line, knowing that the tag is encountered;
Overflow:hidden; do not display more than the object size of the content, is to put out the part of the hidden;
Text-overflow:ellipsis; When the text object overflow is displayed ... and of course, the Set property is not displayed for clip point points;
-o-text-overflow: To be compatible with opera browser;
Two: Multi-line text overflow shows ellipsis...
1. Set directly with css property (only the -webkit kernel works)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How does CSS show an ellipsis in the text overflow section? Multiple lines exceeded</title>
<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;
}
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{
Content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
Background: -webkit-linear-gradient(left, transparent, #fff 55%);
Background: -o-linear-gradient(right, transparent, #fff 55%);
Background: -moz-linear-gradient(right, transparent, #fff 55%);
Background: linear-gradient(to right, transparent, #fff 55%);
}
</style>
</head>
<body>
<div class="box">
<p>
Css implements multiple lines of text beyond the length to display an ellipsis.
Css implements multiple lines of text beyond the length to display an ellipsis.
Css implements multi-line text over length display ellipsis
</p>
</div>
</body>
</html>
Among them, most of the mobile browsers are WebKit kernels, so this method is applicable to the mobile terminal;
-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. This is an unsupported WebKit property that does not appear in the CSS specification draft;
Display: -webkit-box displays the object as an elastic telescopic box model;
-webkit-box-orient Sets or retrieves the arrangement of child elements of the retractable box object;
Text-overflow: ellipsis For use with multiple lines of text, use the ellipsis "..." to hide out-of-range text.
2. Use pseudo-classes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How does CSS show an ellipsis in the text overflow section? Multiple lines exceeded</title>
<style>
*{margin: 0px;padding: 0px;}
.box{width: 300px;height: 500px;margin: 50px auto;}
.con{
Position: relative;
Height: 40px;
Width: 250px;
Line-height: 20px;
Overflow: hidden;
Padding-right: 12px;
}
.t{
Position: absolute;
Right: 0;
Bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<p class="con">
Css implements multiple lines of text beyond the length to display an ellipsis.
Css implements multiple lines of text beyond the length to display an ellipsis.
Css implements multiline text over length to display an ellipsis.
<span class="t">...</span>
</p>
</div>
</body>
</html>
This method has a wide range of applications, but an ellipsis will appear if the text does not exceed the line. This method can be optimized in conjunction with js.
Set height to an integer multiple of line-height to prevent excess text from being exposed. Adding a gradient background to p::after prevents the text from showing only half. Since ie6-7 does not display content content, it is necessary to add tags compatible with ie6-7 (eg: <span>...<span/>); compatible with ie8 needs to replace ::after with: after.
3. Use absolute positioning and padding; (cross-browser solution)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How does CSS show an ellipsis in the text overflow section? Multiple lines exceeded</title>
<style>
*{margin: 0px;padding: 0px;}
.box{width: 300px;height: 500px;margin: 50px auto;}
.con{
Position: relative;
Height: 40px;
Width: 250px;
Line-height: 20px;
Overflow: hidden;
Padding-right: 12px;
}
.t{
Position: absolute;
Right: 0;
Bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<p class="con">
Css implements multiple lines of text beyond the length to display an ellipsis.
Css implements multiple lines of text beyond the length to display an ellipsis.
Css implements multiline text over length to display an ellipsis.
<span class="t">...</span>
</p>
</div>
</body>
</html>
The principle of this method is: first embed a <span>...</span> in the element containing the text, and then leave the position of the ellipsis... (padding-right) to the right of the element containing the text, and finally Use absolute positioning to position the ellipsis... to the padding-right area on the right (lower right corner).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
