CSSでエリアからはみ出した文字を三点リーダー（…）で省略する方法

画面のレイアウト上、どうしても長い文章を表示させたときにはみ出してしまうことがあります。

今回はそんな時に自動でエリアからはみ出した文字を三点リーダー（…）で省略する方法を解説します。

はみ出した文字を省略するCSS

エリアからはみ出した文字を自動で三点リーダー（…）で省略するには「text-overflow: ellipsis;」を利用します。

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

これだけで簡単に使えます。

<div class="ryaku" style="max-width: 130px;">あいうえおかきくけこさしすせそ</div>

と書くと

あいうえおかきくけこさしすせそ

とはみ出した部分は三点リーダー（…）で省略されます。

はみ出し部分を三点リーダー（…）で省略するのは「text-overflow: ellipsis;」を利用することで意外と簡単にできます。

以上、「CSSでエリアからはみ出した文字を三点リーダー（…）で省略する方法」でした。