页面效果
这里实现的是两行文本超出使用…替换
第一种方式:采用css实现
附上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用css实现多行文本超出使用...代替</title>
<style>
.a{
overflow: hidden;/*用于隐藏超出的文本和...*/
max-height: 50px;/*用来设置具体显示几行,设置的值最好可以被50整除,否则效果可能不对*/
line-height: 25px;
}
.a:before{
content: "";
float: left;
width: 5px;
height: 50px;/*这个高度最好和.a中的max-height高度保持一致,设置的值最好可以被50整除,否则效果可能不对*/
}
.a > *:first-child{
float:right;
width:100%;
margin-left:-5px;
}
.b{
content:"\02026";
box-sizing:content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing:content-box;
float:right;
position:relative;
top:-21px;/*用来调整...的位置*/
left:100%;
width:8em;
margin-left:-8em;
padding-right:5px;
text-align:right;
}
</style>
</head>
<body>
<div class="a">
<div>
<!--在这里最好不要使用带margin或padding的标签,比如p标签、h1~h6标签等。-->
<!--在span标签中不要使用margin或者padding,要想设置字体大小请设置在div中-->
<span>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</span>
</div>
<div class="b">
<!--在span标签中写入该样式是为了将...下的文本遮挡住-->
<span style="background-color:#fff;display:inline-block;">...</span>
</div>
</div>
</body>
</html>
第二种方式:采用js实现
附上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用js实现多行文本超出使用...代替</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
p {
position: relative;
margin:20px auto;
width: 20%;
font-size: 13px;
color: #868789;
line-height: 17px;
text-align: left;
overflow: hidden;
}
.p-after:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -moz-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(left, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
</style>
</head>
<body>
<p class="test">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言</p>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$('p').each(function(i, obj){
let lineHeight = parseInt($(this).css("line-height"));
let height = parseInt($(this).height());
console.log(height,lineHeight);
if((height / lineHeight) > 2 ){
$(this).addClass("p-after")
$(this).css("height","32px");
}else{
$(this).removeClass("p-after");
}
});
$(window).resize(function() {
//获取文本的行高,并获取文本的高度,假设我们规定的行数是二行,那么对超过行数的部分进行限制高度,并加上省略号
$('p').each(function(i, obj){
$(this).removeClass("p-after");
$(this).removeAttr("style");
let lineHeight = parseInt($(this).css("line-height"));
let height = parseInt($(this).height());
if((height / lineHeight) > 2 ){
$(this).addClass("p-after")
$(this).css("height","32px");
}else{
$(this).removeClass("p-after");
}
});
});
})
</script>
</body>
</html>
备注:第二种采用js的方式参考https://blog.csdn.net/janessssss/article/details/80450819,将原来固定的长度改成了动态长度。