【簡単】CSSで文字数制限(三点リーダーによる省略)を実装する

著者:牧野健人

この記事ではCSSだけで文字数制限を実装する方法を解説します。たった4行のCSSで設定できるため、非常にお手軽です

ただし、正確に言うと今回ご紹介するのは「文字数」そのものの制限ではなく、「この長さを超えたら三点リーダー(…)で省略する」という仕様の実装方法です。そのため、「表示させたい領域が決まって、そこを超える部分は折り返すのではなく省略したい」という場合にはこの方法を採用していただければと思います。
文字数そのものを制限したい場合はJavaScriptによる実装を解説した章をご覧ください。

関連記事

textareaやinputの入力文字数制限をJavaScriptで実装する

牧野健人

記事の著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

CSSで文字数制限(三点リーダーによる省略)を実装する方法

まずはデモをご覧ください。その後、具体的なコードをご紹介し、仕組みを解説をします。

デモ

省略しない通常の状態

省略無しのテキストです。文が360pxを超えると、行が折り返して行きます。

省略を設定した状態

360pxを超える部分は三点リーダーになり省略されます。

コード

HTML

<p class="ellipsis">三点リーダーを実装したいテキストを入れます</p>

CSS

.ellipsis {
    width: 300px; /* 省略せずに表示するサイズを指定 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

CSSの各行の解説は下記の通りです。

width: 300px;
省略せずに表示するサイズを、任意の数字で指定します。
white-space: nowrap;
改行をしないという意味です。これが無いと、省略されずに文が折り返してしまいます。
overflow: hidden;
上述で指定したサイズからはみ出る部分を非表示にするための記述です。これが無いと、省略されずに文がはみ出てしまいます。
text-overflow: ellipsis;
はみ出して非表示になった要素がある場合に、三点リーダーを表示するための記述です。これが無いと、文が途中でカットされるだけで、三点リーダーは表示されません。

JavaScriptで文字数そのものを制限する方法

上述の通り三点リーダーによる省略はCSSのみで実装できますが、省略の基準を長さではなく文字数にしたい場合はJavaScriptを使う必要があります。

そのためのコードは下記の通りです。

HTML

<p id="limited-text">文字数が50文字を超える場合、51文字目以降は省略され、末尾に「...」が追加されます。</p>

JavaScript

const applyTextLimit = () => {
  let maxLength = 50; //上限文字数
  let limitedText = document.getElementById('limited-text');
  let originalText = limitedText.innerText;
  if (originalText.length > maxLength) {
    limitedText.innerText = originalText.substr(0, maxLength) + '...';
  }
}
applyTextLimit();

let maxLength = 50;が上限文字数になるため、任意の値に差し替えてください。

WebサイトのCV数を増やしたいなら無料相談 / お問い合わせ