使用css实现 “查看更多” 的功能和样式

小九dy

已于 2022-09-21 11:12:22 修改

阅读量3.8k

点赞数

文章标签： css javascript 前端

于 2022-09-21 11:05:39 首次发布

本文链接：https://blog.csdn.net/weixin_43234736/article/details/126968452

版权

当文字过长时，我们通常使用省略号的形式限制行数，这种可实现大多数的情况。
但是，当我们要在文字超出时的末尾添加一个查看更多按钮，不超出时不显示此按钮，
单纯使用省略号的方式并不能实现，因为我们并不知道何时才会出现省略号。
在这里插入图片描述

通过一番尝试，发现一种可用float的排列原理实现此功能，先上代码：

<html lang="en">
<style>
.container {
	width: 500px;
	height: 500px;
	border: 1px solid #ccc;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin: 100px auto;
}
.comment-detail-wrapper {
	position: relative;
	overflow: hidden;
}
	
.comment-detail {
	max-height: 63px;
	word-break: break-word;
}

.comment-detail-fake {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	color: transparent;
}
.ellipsis-abs {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 0;
}
.ellipsis-abs::before {
	float: right;
	content: '';
	width: 50%;
	height: 100%;
}
.ellipsis-abs .ellipsis-placeholder {
	float: right;
	width: 50%;
	height: 63px;
}
.ellipsis-more {
	float: right;
	margin-top: -21px;
	color: #aaa;
	background: #fff;
	cursor: pointer;
}

</style>
<body>
	<div class="container">
		<div class="comment-detail-wrapper">
			<div class="comment-detail">
				《背影》是现代作家朱自清（1898-1948）于1925年所写的一篇回忆性散文。
				这篇散文叙述的是作者离开南京到北京大学，父亲送他到浦口火车站，照料他上车，并替他买橘子的情形。在作者脑海里印象最深刻的，是
				他父亲替他买橘子时在月台爬上攀下时的背影。作者用朴素的文字，把父亲对儿女的爱，表达得深刻细腻，真挚感动，从平凡的事件中，呈
				现出父亲的关怀和爱护
			</div>
			<div class="comment-detail-fake">
				<div>
					《背影》是现代作家朱自清（1898-1948）于1925年所写的一篇回忆性散文。
					这篇散文叙述的是作者离开南京到北京大学，父亲送他到浦口火车站，照料他上车，并替他买橘子的情形。在作者脑海里印象最深刻的，是
					他父亲替他买橘子时在月台爬上攀下时的背影。作者用朴素的文字，把父亲对儿女的爱，表达得深刻细腻，真挚感动，从平凡的事件中，呈
					现出父亲的关怀和爱护
				</div>
				<div class="ellipsis-abs">
					<div class="ellipsis-placeholder"></div>
					<div class="ellipsis-more" onclick="lookMore()">...查看更多</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	const detailEle = document.querySelector('.comment-detail')
	const detailFakeEle = document.querySelector('.comment-detail-fake')
	const lookMore = function () {
		detailEle.style.maxHeight = 'none'
		detailFakeEle.style.display = 'none'
		
	}
</script>
</html>