【JS】H5超出文字显示“展开全部”按钮

Z时代
2024-01-10
分类：技术分享

如图：当文字超过5行时，在末尾显示“展开全部”，要求每个分辨率机型都是在末尾显示“展开全部”。那么我如果判断什么时候文字过少时不显示“展开全部了”

css为：

回答

如下代码所示
给代码块限制最大高度，溢出隐藏
没超出四行就看不到展开全部
五行的时候显示展开全部
点击展开全部，给div加上 class show-more
取消最大高度限制

<div>
    评论文字评论文字评论文字评论文字评论文字评论文字评论文字评论文字
    <span>展开全部<span><div>

div {
    line-height: 18px;
    max-height:90px;
    overflow:hidden;
    position:relative;
}
div span {
    position:absolute;
    right: 0;
    top: 72px;
    line-height: 18px;
    background-color: white;
}
div.show-more {
    max-height:none;
}
div.show-more span {
    top: unset;
    bottom: 0;}