【jQuery】文字数が一定以上の場合に省略（…）する完全ガイド｜CSS・JS両方解説

長いテキストを一定文字数で省略表示する実装は、記事一覧やカードUIで頻繁に使われます。CSS（-webkit-line-clamp）・JavaScript文字列処理・「続きを見る」展開機能まで解説します。

1. CSSだけで省略表示する（推奨）

モダンブラウザではCSSだけで行数制限と省略記号の表示が可能です。JavaScriptは不要です。

/* 1行で省略 */
.truncate-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;  /* 幅の制限が必要 */
}

/* 複数行で省略（Chrome・Safari・Edge・Firefox対応） */
.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 表示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

2. jQueryで文字数で切り詰める

文字数ベースで正確に切り詰めたい場合や、HTMLの一部（タグを除いたテキスト）を対象にする場合に使います。

$(function () {
  var maxLen = 80;  // 最大文字数

  $('.truncate-text').each(function () {
    var text = $(this).text();
    if (text.length > maxLen) {
      $(this).text(text.slice(0, maxLen) + '…');
    }
  });
});

3. 「続きを読む」で展開/折りたたみ

省略表示と「続きを読む」ボタンを組み合わせた、ブログでよく使われるパターンです。

<div class="read-more-box">
  <div class="rm-content" data-limit="100">
    長い本文テキストがここに入ります。この文章は100文字を超えた場合に省略されます。
    続きの文章はここに書かれています。ボタンをクリックすると全文が表示されます。
  </div>
  <a class="rm-toggle" href="#">続きを読む</a>
</div>

$(function () {
  $('.rm-content').each(function () {
    var $el    = $(this);
    var limit  = parseInt($el.data('limit'), 10) || 100;
    var full   = $el.text();

    if (full.length <= limit) {
      $el.next('.rm-toggle').hide();  // 短い場合はボタンを隠す
      return;
    }

    var short = full.slice(0, limit) + '…';
    $el.text(short).data('full', full);  // 全文をdataに保存
  });

  $(document).on('click', '.rm-toggle', function (e) {
    e.preventDefault();
    var $toggle = $(this);
    var $content = $toggle.prev('.rm-content');
    var isExpanded = $toggle.text() === '閉じる';

    if (isExpanded) {
      var limit = parseInt($content.data('limit'), 10) || 100;
      $content.text($content.data('full').slice(0, limit) + '…');
      $toggle.text('続きを読む');
    } else {
      $content.text($content.data('full'));
      $toggle.text('閉じる');
    }
  });
});

まとめ

関連記事: jQueryの.lengthプロパティで要素数を取得する方法 / jQueryのeach()でループ処理する方法

よくある質問（FAQ）