css 实现多行展开收起自动隐藏(全兼容)_weixin_45162984的博客-程序员秘密

技术标签: css  前端css  

css 实现多行展开收起自动隐藏(全兼容)

学习笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex {
     
            display: flex;
        }
        input {
     
            display: none;
        }
        .box {
     
            /* display: -webkit-box;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical; */
            max-height: 40px;
            overflow: hidden;
            line-height: 20px;
            position: relative;
            transition: .3s max-height;
        }
        .box::after {
     
            content: '...';
            width: 999vw;
            height: 999vw;
            position: absolute;
            box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
            margin-left: -100px;
        }
        input:checked + .box::after {
     
            visibility: hidden;
        }
        .box::before {
     
            content: '';
            width: 0;
            height: 100%;
            margin-bottom: -20px;
            float: right;
        }
        .box .btn {
     
            float: right;
            background: blue;
            color: #fff;
            height: 20px;
            border: none;
            clear: both;
            position: relative;
            margin-left: 22px;
        }
        .box .btn::before {
     
            content: '...';
            position: absolute;
            line-height: 20px;
            left: -8px;
            color: #000;
            transform: translateX(-100%);
        }
        .box .btn::after {
     
            content: '展开';
            display: block;
            padding: 0 5px;
            height: 20px;
            background-color: aqua;
            line-height: 20px;
        }
        input:checked + .box {
     
            max-height: 100px;
        }
        input:checked + .box .btn::after {
     
            content: '收起';
        }
        input:checked + .box .btn::before {
     
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="flex">
        <input type="checkbox" id="btn">
        <div class="box">
            <label class="btn" for="btn"></label>我是纯css实现的收起展开功能我是纯css实现的收起展开功能我是纯css实现的收起展开功能我是纯css实现的收起展开功能我是纯css实现的收起展开功能我是纯css实现的收起展开功能
        </div>
    </div>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45162984/article/details/117173648

智能推荐

一篇文章掌握SwiftUI Animation动画技能(2020教程含源码)_知识大胖的博客-程序员秘密

欢迎订阅专栏《SwiftUI 2020教程》本文价值与收获看完本文后,您将能够作出下面的动画SwiftUI AnimationSwiftUI Animation看完本文您将掌握的技能动画制作的核心流程制作位移效果图片的显示与设置背景的设置自定义Button欣赏远古壁画技术交流我的QQ:QQ:3365059189SwiftUI...

亿级流量峰值,如何攻破?(文末送书)_程序IT圈的博客-程序员秘密

文末送书3本许多大型互联网系统,如电商、社交、新闻等App或网站,动辄日活千万甚至上亿,每分钟的峰值流量在数十万以上,架构上如何应对如此高的流量峰值呢?本文选自《技术人修炼之道:从程序员...

淡定心态_hyhu的博客-程序员秘密

经过一段时间的风光无限,背后的空虚却如老朋友一般,再次如约而至。担心未来的职业规划,担心未来的生活,担心经济危机下的发展是不是存在更多的不确定。在空虚的同时,发现已经很久没有认真的读一本书了,淡定心态不是一句口号,也不是一种态度,而是认认真真去工作,学习的一种方式。 在喊出淡定的N年后,决定认认真真的读几本书。 我们的目标是:能力大于role.列一些书单吧:《从程序员到CTO的职业规划》 -

BUUCTF Rabbit_白塔河冲浪手的博客-程序员秘密

学习关于Rabbit加密的密文特征AES、DES、RC4、Rabbit、Triple DES(3DES)这些算法都可以引入密钥,密文特征与Base64类似,明显区别是秘文里​​+​​​比较多,并且经常出现​​/​​且Rabbit开头部分通常为U2FsdGVkX1题目给了一串密文直接解密 解密网站包上flag就能提交了...

webpack搭建框架_webpack框架_mrzhangdulin的博客-程序员秘密

搭建框架webpack 基本介绍Webpack 的特点Webpack 构建流程核心概念如何使用 Webpack搭建项目模板框架项目初始化安装 Webpack安装 Vue安装一些依赖npm install vue-routernpm install -D vue-loader vue-template-compilernpm install -D sass-loader n...

随便推点

QT 鼠标右键菜单_追梦鸟的博客-程序员秘密

QWidget及其子类都可有右键菜单,因为QWidget有以下两个与右键菜单有关的函数:Qt::ContextMenuPolicy contextMenuPolicy () constvoid setContextMenuPolicy ( Qt::ContextMenuPolicy policy )Qt::ContextMenuPolicy枚举类型包括:Qt::Defaul

Low-Rank Matrix Fitting_lmafit_dajue2014的博客-程序员秘密

http://lmafit.blogs.rice.edu/LMaFit is a MATLAB package that currently solves the following problemsMatrix Complete (MC)Find a rank-r matrix U such that Uij ~= Aij, (i,j) in E.Spa

改造vue-element-admin 的登录功能,变成从后台数据库中验证登录_vue element 登录后台判断_聪明不喝牛奶的博客-程序员秘密

改造vue-element-admin 的登录功能,变成从后台数据库中验证登录首先了解登录时前段需要什么样的数据要知道vue-element-admin 这个后台开发模板是集成非常多我们日常开发网站的基本功能。所以我们在改造登录功能的时候首先要明白vue-element-admin 需要后端提供什么样的数据才能完成后端的校验完成登录。如下图:从图中可以看到登录的时候必须后端会根据你的请求给你的返回一个状态码:20000 token令牌 success 成功的信息。再接着我们查看vue-eleme

Windows 10系统环境下Git安装及配置图文详解_EWITECH的博客-程序员秘密

Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。

Vue2.x和Vue3.0项目创建_一只小傲娇的博客-程序员秘密

步骤一:// 查看vue-cli是否全局安装vue --version步骤二:// 全局安装vue-cli脚手架npm install vue-cli -g步骤三:// 基于vue-cli脚手架创建vue项目vue init webpack 项目名称步骤四:// 启动项目cd 项目名称npm run dev...

fpga时序、约束和电路中竞争冒险的关系分析_通俗易懂篇!_时序竞争关系_fpga_Spig的博客-程序员秘密

1、fpga中各个电路的工作是依靠时钟驱动,当发生建立时间Tsu和保持时间Th违规时,就需要 约束 来调整这些违规的信号。2、违规的发生本质是: 1、建立违规:Tclk(周期)&lt;FA(逻辑计算)+路由时间+建立时间Tsu 2、保持违规:沿敏感(上升)在保持时间采集数据,保持时间未满 ...

推荐文章

热门文章

相关标签