当文字过长时,我们通常使用省略号的形式限制行数,这种可实现大多数的情况。
但是,当我们要在文字超出时的末尾添加一个查看更多按钮,不超出时不显示此按钮,
单纯使用省略号的方式并不能实现,因为我们并不知道何时才会出现省略号。
通过一番尝试,发现一种可用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>
*其中:样式中的最大高度需要根据文本的字体大小有所调整