jTruncSubstr jQueryプラグイン コードまとめ

レビュー投稿など文字数が多い場合に、特定の文字数以上は非表示にして、表示非表示を切り替えることができるプラグイン。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jTruncSubstr.js"></script>
<script type="text/javascript">
  $().ready(function() {
    $('.comment').jTruncSubstr({
      length: 200,//表示させる文字数
      minTrail: 0,//省略文字の最低文字数
      moreText: "続きを読む",//非表示部分を表示するリンクの文字列
      lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
      ellipsisText: "...",//続きがあることを表示するための文字列
      moreAni: "fast",//表示時のアニメーション速度
      lessAni: "fast"//非表示時のアニメーション速度
    });
  });
</script>
<style>
  .comment .truncate_more_link {
    text-decoration: underline;
    color: #1242b2;
  }
</style>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>

1. jQueryの読み込み

https://developers.google.com/speed/libraries/#jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. jTruncSubstrスクリプトの読み込み

http://semooh.jp/jglycy/jquery-plugins/jtruncsubstrからjsファイルをダウンロードしてサーバーにアップ。

<script src="js/jTruncSubstr.js"></script>

3. クラスまたはID名で適用する箇所を指定

<script type="text/javascript">
  $().ready(function() {
    $('.comment').jTruncSubstr({
      length: 200,//表示させる文字数
      minTrail: 0,//省略文字の最低文字数
      moreText: "続きを読む",//非表示部分を表示するリンクの文字列
      lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
      ellipsisText: "...",//続きがあることを表示するための文字列
      moreAni: "fast",//表示時のアニメーション速度
      lessAni: "fast"//非表示時のアニメーション速度
    });
  });
</script>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>

4. スタイル指定

開閉リンクのクラス名：truncate_more_link

<style>
  .comment .truncate_more_link {
    text-decoration: underline;
    color: #1242b2;
  }
</style>

ちょうどいい文字数（font-size: 14pxの場合）

PC（幅1000px）：文字数210文字で3行分。
SP（幅355px）：95文字で4行分。

jTruncSubstr
アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』