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

效果

文本过长,超过固定行数省略号,点击更多显示_第1张图片

代码

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 Templatetitle>
  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>

你可能感兴趣的:(javascript,前端)