【jQuery】長い文章を省略して表示する

ishikawa

12年 ago

jQueryを使用して、一定以上の長さの文章を省略するサンプルを作成しました。

文章の省略はcss3のtext-overflowプロパティでも実装できますが、複数行には対応していません。
そのため今回は、指定した文字数以降を省略するようにします。

jQueryのバージョンは1.9を使用しています。

■HTML
class名に"text_overflow"が付いているものを省略の対象にします。

<ul>
  <li class="text_overflow">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</li>
   <li class="text_overflow">かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ</li>
</ul>

■JavaScript
jQuery本体を読み込み、下記を記述します。

$(function() {
    var count = 20;
 $('.text_overflow').each(function() {
     var thisText = $(this).text();
      var textLength = thisText.length;
       if (textLength > count) {
            var showText = thisText.substring(0, count);
            var hideText = thisText.substring(count, textLength);
           var insertText = showText;
          insertText += '<span class="hide">' + hideText + '</span>';
           insertText += '<span class="omit">…</span>';
            insertText += '<a href="" class="more">もっと見る</a>';
            $(this).html(insertText);
       };
  });
 $('.text_overflow .hide').hide();
 $('.text_overflow .more').click(function() {
      $(this).hide()
          .prev('.omit').hide()
         .prev('.hide').fadeIn();
      return false;
   });
});

デモページはこちら

大まかな処理の流れは下記になります。

省略する文字数（count = 20）を指定する。
省略したい文章（thisText）と、その文字数（textLength）を取得する。
thisTextを、表示する文章（showText）と省略する文章（hideText）に分ける。
省略後の文章（insertText）を生成して、thisTextと差し替える。
「もっと見る」をクリックしたときに、省略している文章を表示する。

(3と4はtextLengthがcountより大きいときのみ実行され、それ以外はそのまま表示されます。)

上記のサンプルでは「もっと見る」で省略部分を表示するようにしましたが、
この機能が不要な場合は下記のように変更します。
HTMLは変更ありません。

■JavaScript

$(function() {
    var count = 20;
 $('.text_overflow').each(function() {
     var thisText = $(this).text();
      var textLength = thisText.length;
       if (textLength > count) {
            var showText = thisText.substring(0, count);
            var insertText = showText;
          insertText += '<span class="omit">…</span>';
            $(this).html(insertText);
       };
  });
});

デモページはこちら

レスポンシブのサイトなどでは、画面幅に応じて文章を省略したい場合があるかと思います。
その場合は、下記のように変更することで画面幅に応じて表示を切り替えることができます。
HTMLは変更ありません。

■JavaScript
画面幅が320px以下のときに省略され、320pxより大きい場合には省略なしで表示されます。

$(function() {
   var count = 20;
 $('.text_overflow').each(function() {
     var thisText = $(this).text();
      var textLength = thisText.length;
       if (textLength > count) {
            var showText = thisText.substring(0, count);
            var hideText = thisText.substring(count, textLength);
           var insertText = showText;
          insertText += '<span class="hide">' + hideText + '</span>';
           insertText += '<span class="omit">…</span>';
            insertText += '<a href="" class="more">もっと見る</a>';
            $(this).html(insertText);
       };
  });
 $('.text_overflow .more').click(function() {
      $(this).hide()
          .prev('.omit').hide()
         .prev('.hide').fadeIn();
      return false;
   });

 var winWidth = $(window).width();
   var checkFlag;
  if(winWidth <= 320) {
        checkFlag = 'hide';
   } else {
        checkFlag = 'show';
   }
   function winWidthCheck() {
      winWidth = $(window).width();
       if((winWidth <= 320) && (checkFlag == 'hide')) {
           $('.text_overflow .hide').hide();
         $('.text_overflow .more, .text_overflow .omit').fadeIn();
         checkFlag = 'show';
       } else if((winWidth > 320) && (checkFlag == 'show')) {
         $('.text_overflow .hide').fadeIn();
           $('.text_overflow .more, .text_overflow .omit').hide();
           checkFlag = 'hide';
       }
   }
   winWidthCheck();
    $(window).resize(function() {
       winWidthCheck();
    });
});

デモページはこちら

checkFlagで処理が複数回実行されないようにしています。
画面幅による表示の切り替えは、winWidthCheck() で行っています。

文章の省略方法は知っておくと便利な機能だと思いますので、
参考にしていただければと思います。