3点リーダーを実装

久々のマークアップで生のJSを機会があり、そこで対応した3点リーダーを実装例を紹介したいと思います！

hoge

ソースコード

.....
.....
  <body>
    <p data-truncation="2">
      あなたはほかいくらいわゆる附着らについてもののところであるただ。何しろ今から相談人はどうしてもその発展たたほどをありばいらっしゃるですには仕事出んたば、そうには察せだろあるましず。個人が掴みまいのはもっとも前よりもうんでん。
    </p>
  </body>
  <script type="text/javascript">
    // 要素と記入した数字を入れた関数を作成
    const addTruncationCSS = (element, lineNumber) => {
      // element.styleに-webkit-line-clampがあるか
      if ("WebkitLineClamp" in element.style) {
        // ...を表示するCSS　を定義
        element.style.display = "-webkit-box";
        element.style.WebkitLineClamp = lineNumber;
        element.style.WebkitBoxOrient = "vertical";
        element.style.overflow = "hidden";
      } else {
        // element.styleに-webkit-line-clampがない場合
        const limitHeight =
          parseFloat(getComputedStyle(element).lineHeight) * Number(lineNumber);
        element.style.overflowY = "hidden";
        element.style.height = String(limitHeight) + "px";
      }
    };

    //html側で記入したdata-truncationを取得
    const truncationElements = document.querySelectorAll("[data-truncation]");
    //もしhtml側でdata-truncationを記入したら
    if (truncationElements) {
      //truncationElementsをelementへ代入して回す
      for (const elemet of truncationElements) {
        // 記入した数字をlineNumberへ代入
        const lineNumber = elemet.dataset.truncation;
        // 要素と記入した数字を入れた関数を作成
        addTruncationCSS(elemet, lineNumber);
      }
    }
  </script>
</html>

ブログの投稿ログ

# ソースコード

ソースコード