【jQuery】文字数が一定以上の場合省略する方法

ウェブページやアプリケーション上でテキストの長さを制御することは、UI/UXの観点から非常に重要です。今回は、jQueryを使用してテキストの長さを簡単に制御する方法を学びます。

なぜテキストの長さを制御するのか?

視認性の向上: 長いテキストは読み手を疲れさせる可能性があります。
レスポンシブデザイン: スマホやタブレットなどの小さい画面でも適切にコンテンツを表示するため。
一貫性の確保: 全てのテキストが同じ長さを持つことで、デザインの統一感が生まれる。

jQueryでのテキスト省略の実装方法

jQueryのセットアップ

最初に、ページにjQueryをインクルードします。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

truncateText関数の作成

以下のコードを使用して、特定のテキストの長さを制御する関数を作成します。

function truncateText(selector, maxLength) {
    $(selector).each(function() {
        var text = $(this).text();
        if (text.length > maxLength) {
            var truncated = text.substring(0, maxLength) + '...'; 
            $(this).text(truncated);
        }
    });
}

関数の使用方法

例として、.long-textクラスを持つ要素のテキストを50文字に切り詰める場合のコードは以下の通りです。

truncateText('.long-text', 50);

まとめ

jQueryを使用すると、テキストの長さの制御が非常に簡単になります。このテクニックを活用して、読者やユーザーにとってより親しみやすいインターフェースを提供しましょう。