文本过长，超过固定行数省略号，点击更多显示

最新推荐文章于 2024-03-28 18:05:03 发布

Joey_iSleepy

最新推荐文章于 2024-03-28 18:05:03 发布

阅读量265

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_60178319/article/details/133785420

版权

该篇文章介绍了如何使用HTML、CSS和JavaScript创建一个静态模板，通过CSS3的`line-clamp`属性结合JavaScript实现文本内容的分段显示和隐藏，以提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

请添加图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .te {
      float: right;
      clear: both;
      text-align: center;
      text-align: center;
      background: #0088cc;
      color: #fff;
    }

    .content {
      display: flex;
    }

    .text::before {
      content: "";
      float: right;
      height: 100%;
      margin-bottom: -20px;
      width: 0;
    }
    .vis::before {
      content: "";
      float: right;
      height: 100%;
      margin-bottom: -20px;
      width: 0;
    }

    .text {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    #toggle {
      display: none;
    }

    label {
      color: cadetblue;
      z-index: 9;
      float: right;
      clear: both;
      margin-left: 8px;
      display: none;
    }

    .unsetClamp {
      -webkit-line-clamp: unset;
    }

    label::after {
      content: "显示更多";
      margin-bottom: -20px;
      display: inline-block;
    }

    input[name="toggle"]:checked + label::after {
      content: "收起";
    }

    .have {
      display: block;
    }
  </style>
  <body>
    <div class="content">
      <div class="text vis">
        <input type="checkbox" id="toggle" name="toggle" />
        <label for="toggle"></label>
        <span
          >先帝创业未半，而中道崩殂；今天下三分，益州疲弊，此诚危急存亡之秋也！然侍卫之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。
          诚宜开张圣听，以光先帝遗德，恢弘志士之气﹔不宜妄自菲薄，引喻失义，以塞忠谏之路也。
          宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸、犯科，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
          侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰「能」，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
          亲贤臣，远小人，此先汉所以兴隆也﹔亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也！侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之、信之，则汉室之隆，可计日而待也。
        </span>
      </div>
    </div>
    <script>
      window.onload = function () {
        const textContent = document.getElementsByTagName("span");
        const textContents = document.getElementsByClassName("text")[0];
        const labelBox = document.getElementsByTagName("label")[0];
        let { clientHeight, scrollHeight } = textContents;
        console.log(clientHeight, scrollHeight, textContents);
        if (clientHeight < scrollHeight && clientHeight != scrollHeight) {
          labelBox.classList.add("have");
        } else {
          labelBox.classList.remove("have");
        }
        const check = document.querySelector("#toggle");
        check.addEventListener("change", function (e) {
          if (e.target.checked) {
            textContents.classList.remove("text");
          } else {
            textContents.classList.add("text");
          }
        });
      };
    </script>
  </body>
</html>