点击"查看更多"功能怎么实现，css实现"查看更多"的功能方法，当文字过长时，我们通常使用省略号的形式限制行数，这种可实现大多数的情况。
但是，当我们要在文字超出时的末尾添加一个"查看更多"按钮，不超出时不显示此按钮，
单纯使用省略号的方式并不能实现，因为我们并不知道何时才会出现省略号。
通过一番尝试，发现一种可用float的排列原理实现此功能，先上代码：
<html>
<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>
*其中：样式中的最大高度需要根据文本的字体大小有所调整
本文地址：网络知识频道 https://www.hkm168.com/jiqiao/903040.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
