需求:
多行溢出显示省略号并在末尾添加展开按钮,点击展开,展示所有文字

实现代码

<!DOCTYPE html>
<style>
     .cont {
        display: flex; // 设置flex,撑开父元素,否则伪类设置calc计算不了高度
        width: 300px;
     }
     .cont-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;// 超过3行显示省略号
        overflow: hidden;
     }
     // 浮动到右侧,并给更多文字隔出上面的高度
     .cont-text:before {
        content: '';
        height: calc(100% - 20px);
        float: right;
     }
     // 浮动到右侧,并清除掉伪类的浮动
     .more {
        float: right;
        clear: both;
        color: blue;
     }
</style>
<body>
<div class="cont">
    <div class="cont-text">
        <span class="more">更多</span>
        阿萨的拉升阶段拉升阶段爱上邓丽君爱上了多久啊是地洒落的就爱上了大家爱上了大厦的拉升阶段撒啊三菱电机爱上了的撒奥斯陆冬季阿斯兰的
    </div>
</div>
</body>
</html>

实现效果
image.png


juan26
521 声望19 粉丝