CSS实现多行文本展开/收起效果，展开/收起按钮环绕文本内容显示

Yvan1
655 阅读2分钟

目前大多数的需求是展开/收起按钮与内容部分显示在不同行，这个比较容易实现。

实现该功能分为下面几个点：

  1. 多行文本溢出时，显示省略效果
  2. 展开和收起状态切换
  3. 展开和收起按钮环绕在内容后面

实现多行文本溢出省略效果

image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多行文本展开/收起效果</title>
  <style>
    .text-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>
  <div class="text-ellipsis">
    汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。
    回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。
    云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。承欢侍宴无闲暇，春从春游夜专夜。
    后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。姊妹弟兄皆列土，可怜光彩生门户。
    遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。缓歌慢舞凝丝竹，尽日君王看不足。
    渔阳鼙鼓动地来，惊破霓裳羽衣曲。九重城阙烟尘生，千乘万骑西南行。翠华摇摇行复止，西出都门百余里。
    六军不发无奈何，宛转蛾眉马前死。花钿委地无人收，翠翘金雀玉搔头。君王掩面救不得，回看血泪相和流。
    黄埃散漫风萧索，云栈萦纡登剑阁。峨嵋山下少人行，旌旗无光日色薄。蜀江水碧蜀山青，圣主朝朝暮暮情。
  </div>
</body>
</html>

实现展开和收起状态切换

image.png

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  <div class="text-ellipsis">
    ...
  </div>
  <button class="btn">展开</button>
  <script>
    var text = document.querySelector('.text-ellipsis');
    var btn = document.querySelector('.btn');
    var isExpanded = false;
    btn.addEventListener('click', function() {
      if (isExpanded) {
        text.style.webkitLineClamp = '3';
        btn.innerText = '展开';
      } else {
        text.style.webkitLineClamp = '999';
        btn.innerText = '收起';
      }
      isExpanded = !isExpanded;
    });
  </script>
</body>
</html>

实现展开和收起按钮环绕在内容后面

image.png

<!DOCTYPE html>
<html>
<head>
  ...
  <style>
    ...
    .content {
      display: flex;
    }
    .text-ellipsis:before {
      content: '';
      float: right;
      height: 100%;
      margin-bottom: -25px;
    }
    .btn {
      float: right;
      clear: both;
      margin-right: 40px;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="text-ellipsis">
      <button class="btn">展开</button>
      <span>...</span>
    </div>
  <div>
  <script>
    ...
  </script>
</body>
</html>

总结

  1. 使用伪元素+float布局实现文字环绕效果（上/下/左/右）
  2. 添加容器节点div.content，并使用flex布局，使得伪元素具有高度，从而实现展开/收起按钮环绕在下边
  3. .btn {clear: both}主要用来清除按钮右侧元素的浮动影响，使得span标签可以正常布局
  4. .btn {margin-right: 40px}控制按钮与右边界的距离；.text-ellipsis:before {margin-bottom: -25px;}控制按钮与下边界的距离
avatar
文章
阅读
粉丝