纯css实现多行文本展开按钮

 

纯css实现多行文本添加展开按钮，不用js代码实现展开全部文字

<!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>多行文本展开按钮</title>
  <style>
    .wrap {
      display: flex;
    }

    .text {
      width: 450px;
      /* 不兼容chrome外浏览器 */
      /* display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; */
      overflow: hidden;
      line-height: 1.5em;
      max-height: 4.5em;
    }

    .text::before {
      content: '';
      float: right;
      width: 0;
      /* 方案一 */
      /* height: calc(100% - 20px); */
      /* 方案二（性能比方案一的calc略好一点） */
      margin-bottom: -1.5em;
      height: 100%;
    }

    .text .btn {
      position: relative;
      color: skyblue;
      width: 80px;
      float: right;
      clear: both;
      cursor: pointer;
      background: #eee;
      text-align: center;
      margin-left: 32px;
    }

    .btn::before {
      content: '...';
      position: absolute;
      left: -10px;
      color: #333;
      transform: translateX(-100%);
    }

    .btn::after {
      content: '展开';
    }

    #exp:checked+.text .btn::after {
      content: '收起';
    }

    /* 实现兼容常见浏览器 */
    [line-clamp="3"] {
      max-height: 4.5em;
    }

    #exp:checked+.text {
      -webkit-line-clamp: 999;
      max-height: none;
    }

    #exp:checked+.text .btn::before {
      /* 在展开状态下隐藏省略号 */
      visibility: hidden;
    }

    .text {
      transition: .3s max-height;
    }

    #exp:checked+.text {
      /* 超出最大行高就可以了 */
      max-height: 200px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <input type="checkbox" id="exp" style="display: none;">
    <!-- line-clamp属性控制行数 -->
    <div class="text" line-clamp="3">
      <!-- <span class="btn">展开</span> -->
      <label class="btn" for="exp"></label> 注意：以上方式回滚后提交的东西也就没有了，如果只是想撤销提交，需要保留可以通过git revert命令操作一下。这种情况是指已经执行了 git add
      提交到暂存区操作，又执行了 git commit 提交本地仓库，还执行 git push 推送到远程仓库。参考上面的 2.1~2.4 的方法，先强制回退到本地仓库到上 N 个版本，再进行强制推送到远程仓库。
    </div>
  </div>
</body>

</html>

 

posted @ 2022-09-02 14:45  丿流水  阅读(450)  评论(0)    收藏  举报