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

公開日:2021年08月20日更新日:2021年09月03日執筆者:牧野健人

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の知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。