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

zhouyunxing

8841827

发布于
2017-10-24

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

css为：

javascript css html

阅读 21.5k

6 个回答

得票最新

leonleung

2.9k1922

发布于
2017-10-24

如下代码所示
给代码块限制最大高度，溢出隐藏
没超出四行就看不到展开全部
五行的时候显示展开全部
点击展开全部，给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;
}