jQueryを使って指定した文字数でテキストを省略する方法

Webサイト内の特定の箇所で、文字数の上限を決めて、それ以降は省略したいということもあるかと思います。

そんな時のために、jQueryを使って、指定した文字数以上になったらテキストを省略する方法をご紹介いたします。

jQueryを使って指定した文字数でテキストを省略する方法

例として、HTMLはシンプルに以下のような感じです。

<div class="abridgement">それらも前必ずしもどんな病気人というののために落ちつけましです。もう今を教育家は無論その発展まいですかもにありているなけれをも邁進見るたなけれども、それほどには防ぐたましでた。師範を描いですのは別に時間からもちろんでましん。</div>

jQueryは、以下の通りです。</body>の直前に記述すれば動きます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $(".abridgement").each(function(){
      if ($(this).text().length > 25) {
          $(this).text($(this).text().substr(0, 24)); 
          $(this).append('…');
      }
  });
});
</script>

上記の例では、25文字以上だった場合、24文字目までを表示してそれ以降は「…」で省略する、という意味合いになります。

「$(this).text().length > 25」で文字数の条件、「$(this).text($(this).text().substr(0, 24))」で表示する文字数、「$(this).append(‘…’)」で省略したテキストの代わりに表示する文字列を指定します。

また、上記ではabridgementというクラスに対してテキスト省略を実行していますので、環境に合わせて「$(“.abridgement”).each(function()」のクラス名を変更してください。

表示するとこんな感じです↓

あとがき

CSSのみで、同じようにテキストを省略して三点リーダーを付ける方法を「CSSだけではみ出したテキストを省略して三点リーダーを付ける方法」という記事で解説しています。jQueryを使いたくない場合は、ぜひこちらの記事をご参照ください。