代码示例

:::

<template>
  <div class="wrap">
      <input type="checkbox" id="exp" class="exp">
      <div class="text">
        <label class="btn" for="exp"></label>
        float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。
        浮动元素是如何定位的
正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。

浮动元素至少要与其最高的嵌套浮动子元素一样高。我们给父元素设置了 width: 100%，并将其设为浮动元素，以确保其高度足够包含其中的浮动子元素，并确保其宽度足以容纳这些元素，我们不必与其相邻的元素。
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>
<style>
  .wrap {
    display: flex;
  }
  .text {
    line-height: 1.5;
    max-height: 4.5em;
    overflow: hidden;
  }
  .text::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      background: #fff;
  }
  .btn {
    position: relative;
    float: right;
    clear: both;
    font-size: 14px;
    margin-left: 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.25s;
  }
  .btn::before{
    content: '...';
    position: absolute;
    left: -2px;
    color: #333;
    transform: translateX(-100%)
  }
  .btn::after{
    content: '展开';
  }
  .text::before{
    content: '';
    float: right;
    width: 0;
    height: 100%;
    margin-bottom: -24px; // 减去按钮高度
    background: red
  }

  .exp {
    display: none;
  }
  .exp:checked+.text{
    max-height: none;
  }
  .exp:checked+.text .btn::before{
    visibility: hidden;
  }
  .exp:checked+.text .btn::after{
    content:'收起'
  }
  .exp:checked+.text::after{
    visibility: hidden;
  }
</style>

:::