文字展开“查看更多”按钮浮动案例

形如：
<!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>test</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        display: flex;
        line-height: 24px;
        font-size: 16px;
        display: flex;
      }
      .box > div {
        max-height: 72px;
        overflow: hidden;
      }
      .box > div > a {
        float: right;
        height: 24px;
        line-height: 24px;
        font-weight: bold;
        margin-left: 12px;
        clear: both;
      }
      .box > div:before {
        float: right;
        height: 48px;
        content: "";
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div>
        <a>查看更多</a>
        <p>
          STM32峰会已成功举办六届，作为业界年度盛会，我们汇集了众多全球生态合作伙伴，带来基于STM32创新的嵌入式解决方案及各类终端产品。
          “STM32 不止于芯”
          是2023年STM32峰会的活动主题，旨在展示意法半导体多样化的产品和解决方案，为工程师们提供亲身体验意法半导体产品及方案的平台。在为期两天的峰会中，我们围绕边缘人工智能，连接，信息安全，生态系统与开发者优先计划四个领域开展涵盖主论坛、分论坛、技术研讨会、以及丰富多彩的Demo演示。与会者面对面近距离参观体验，还能亲身动手操作，深入了解到基于ST及合作伙伴最新的嵌入式技术、产品、以及工具。
          峰会第二天，STM32粉丝狂欢节开放了超十款技术性十足的游戏，让与会者在有趣有料的互动活动中体验STM32的魅力！
        </p>
      </div>
    </div>
  </body>
</html>
douchaoyang / blog

文字展开“查看更多”按钮浮动案例 #15
