console 命令行工具 X clear

console

$(function () {
    //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
    $('.demo2').each(function (i, obj) {
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if ((height / lineHeight) > 3) {
            $(this).addClass("demo2-after")
            $(this).css("height", "60px");
        } else {
            $(this).removeClass("demo2-after");
        }
    });
})

<html>

<head>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">
	</script>
</head>

<body>
	<div class="demo">实现原理很好理解，绝现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字</div>
	<br/>
		<div class="demo1">实现原理很好理解，绝现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过</div>
		<br/>
			<div class="demo2">实现原理很好理解理解，理解理解绝现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过</div>

</body>

</html>

.demo {
    position: relative;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
}

.demo::after {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 20px 0 10px;
}

.demo1 {
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo2 {
    position: relative;
    width: 200px;
    line-height: 20px;
    overflow: hidden;
}

.demo2-after:after {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 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(left, transparent, #fff 55%);
}