jQueryで文章を指定の文字数でカットする方法

一覧画面やトップページに表示する記事タイトルやお知らせテキストなど、レイアウトの都合上特定の文字数分だけ表示するようにレイアウトされたデザインのコーディングが必要なことがあると思います。
そういったときはjQueryで文字数を指定してカットする方法があります。今回は文字数制限と合わせて文末に”…”を追加し、視覚的に続きがあることがわかりやすい状態で実装する方法を紹介します。

jQueryの記述

文字数制限をしていない状態が下記です。liそれぞれに40文字づつテキストが入っています。

See the Pen mjjmrR by hoshu_t (@hoshu_t) on CodePen.

ここに以下のjQueryを加え、20文字で文字数制限を行いました。

See the Pen YjjVGW by hoshu_t (@hoshu_t) on CodePen.

最初のcountで文字数を指定しています。
classtext_limitのテキスト要素を取得し、文字数がcountよりも多かった場合、substringでテキストを抽出し、抽出したテキストに三点リーダーを追加して、classtext_limitの要素に出力しています。

まとめ

jQueryで文末を省略する方法を紹介しました。表示する範囲が不変で、決まった文字数で表示すると定まっている場合には、効果的な方法です。CMSでタイトルや記事本文の冒頭を引用する機会は多いので、要件に適したシチュエーションで活用してみてください。