指定の文字数を超えた場合に省略し「…」にするカスタマイズ方法【CSS/JavaScript】

ハシビィくん

デザイン上、文字数を制限しつつ、続きがあることを示すように「…」を出るようにしたいっす！

カピーさん

よく耳にする要望だな。CSSとJavaScriptで実現可能だぞ！早速伝授しよう。

文字数オーバーで省略するカスタマイズ方法

主に使われる場面としては、「投稿一覧」や「商品一覧」などで文字数の増減によってレイアウト崩れを防ぐなどがあります。

挙動としては、指定した文字数を超えると、「…」（3点リーダー）が挿入されて省略を表すというものになります。

カピーさん

多くのサイトで使われている手法だな

JavaScriptを使ったカスタマイズ

まずはベースとなるテキスト部分について

<p class="text-limit">
桜の花が満開に咲き誇り、その美しさに心が躍る。風がそよぎ、花びらが舞う。人々が笑顔で歩き、春の訪れを喜ぶ。桜のトンネルを抜ければ、幸せが待っているような気がしてくる。
</p>

class名のtext-limit部分は、今回の方法を紹介するために付けただけになります。実際には同一箇所をお好きに記述してOKです。

const limit = document.querySelector(".text-limit"); // class名を入力
const str = limit.textContent;
const len = 50; // 半角50字（全角約25字）
if (str.length > len) {
  limit.textContent = str.substring(0, len) + "…";
}

See the Pen Untitled by takahiro yoshida (@takahiro-yoshida) on CodePen.

これで制限した文字以上の時点で「…」と省略を意味する表現に変化します。

文字数制限を設けることで、PC・スマホのデバイス間による差異でレイアウトに気に止む必要がなくなります。

番外編：行数で制限するカスタマイズ

<p class="text-limit">
桜の花が満開に咲き誇り、その美しさに心が躍る。風がそよぎ、花びらが舞う。人々が笑顔で歩き、春の訪れを喜ぶ。桜のトンネルを抜ければ、幸せが待っているような気がしてくる。
</p>

今回も上記HTMLをベースにカスタマイズ方法を紹介します。

1行までで制限する方法

.text-limit {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

複数行で制限する方法

.text-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 制限した行数を入力 */
}

CSSによる行数で制限する場合の注意点としては、デバイスごとに異なる幅や表示領域に応じて、実際に省略される文字数が変わる点です。

パソコンの画面は、スマホの画面よりも広いので同じ行数制限により省略は実行されます。しかし、スマホが画面が小さくパソコンよりも行数が著しく増えてしまうので、同じ要素でも表示される文字数は少なる可能性があります。

伝えたい情報や興味を惹く文で誘導したい場合には不向きな方法になるので、ご注意を。

まとめ：指定の文字数を超えた場合に省略し「…」にするカスタマイズ方法

最後に『指定の文字数を超えた場合に省略し「…」にするカスタマイズ方法』に関する結論を。