一、效果

动图.gif

二、实现

<!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>
      .wrap {
        padding: 25px;
        box-shadow: 0 5px 20px 3px #ccc;
        border-radius: 5px;
        position: relative;
      }
      #state {
        display: none;
      }
      #state:checked ~ .text {
        -webkit-line-clamp: 99; /* 表示最多显示99行 */
      }
      .btn {
        position: absolute;
        bottom: 0;
        right: 25px;
        background-color: dodgerblue;
        color: #fff;
        font-size: 12px;
        padding: 3px 5px;
        border-radius: 3px;
        cursor: pointer;
      }
      .btn::after {
        content: '展开';
      }
      #state:checked + .btn::after {
        content: '收起';
      }
      .text {
        margin: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 表示最多显示3行 */
        -webkit-box-orient: vertical;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <input type="checkbox" id="state" />
      <label for="state" class="btn"></label>
      <p class="text">
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
      </p>
    </div>
  </body>
</html>

三、实现思路

input标签设置id="state"，label标签设置for="state"，这样可以在点击label的时候改变input的状态
#state:checked表示当前checkbox为选中状态，那么咱们设置默认状态下p标签展示3行，当点击input时，也就是状态为checked时，展示99行
css选择器：
- >：找到子代元素，和空格相比，它不继续往下找孙子辈元素
- +：找到相邻兄弟元素
- ~：.box ~ .text意思是找到相同父级元素下，box元素后面所有的text元素

css选择器：实现展开与收起功能

一、效果

二、实现

三、实现思路