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

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

記事の著者牧野健人

株式会社リラクス 代表取締役。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;が上限文字数になるため、任意の値に差し替えてください。