一覧画面やトップページに表示する記事タイトルやお知らせテキストなど、レイアウトの都合上特定の文字数分だけ表示するようにレイアウトされたデザインのコーディングが必要なことがあると思います。いったときはjQueryで文字数を指定してカットする方法があります。今回は文字数制限と合わせて文末に”...”を追加し、視覚的に続きがあることがわかりやすい状態で実装する方法を紹介します。文字数制限をしていない状態が下記です。liそれぞれに40文字づつテキストが入っています。CodePen.ここに以下のjQueryを加え、20文字で文字数制限を行いました。CodePen.最初のcountで文字数を指定しています。classtext_limitのテキスト要素を取得し、文字数がcountよりも多かった場合、substringでテキストを抽出し、抽出したテキストに三点リーダーを追加して、classtext_limitの要素に出力しています。まとめjQueryで文末を省略する方法を紹介しました。表示する範囲が不変で、決まった文字数で表示すると定まっている場合には、効果的な方法です。CMSでタイトルや記事本文の冒頭を引用する機会は多いので、要件に適したシチュエーションで活用してみてください。楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。