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

公開日:2021年08月20日更新日:2022年01月04日執筆者:牧野健人

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

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

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

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

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

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

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

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

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

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

株式会社リラクス代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。