文字数が多い時に最後に出す「...」をJSでパパッと作る。

今回は、webサイトでよく見る
「サンプルテキストです。サンプルテキストです。サンプルテキ...」の
「...」を関数で出力する方法を紹介。

DEMOはこちら。

See the Pen pogaWpj by 坊 拓磨 (@bo_chan6130) on CodePen.

準備

HTML
JavaScript

できること

・ある文字数を超えると、末尾に「...」が出る。
・超えなかったら超えない範囲の文字をそのまま出力。

実装

index.html

   <p id="hoge">サンプルテキストです。サンプルテキストです。</p>

index.js

    var selectId = document.getElementById("hoge")
    var string = selectId.textContent.replace(/\s+/g,'');

    function truncate(str, len){
        return str.length <= len ? str: (str.substr(0, len)+"...");
      };
    selectId.innerHTML = truncate(string, 5);

ポイント
①任意のidを持ったタグの文章を変数stringにいれる。この際、文字列の中の不要な空白を削除したいのでreplace(/\s+/g,'')を記述。
②真ん中のfunction truncate(str,len)で出力の最大値を調整できるように関数を作成。
③最後、①を②の制限数分だけinnerHTMLで書き換え。

まとめ

cssで擬似要素使う(こっちだとタグ出力範囲での制限だけでちょい使いづらい)よりもこっちの方が早かったので、
もし使いたい方はコピペドゾー。