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

2018/09/10スタイルシート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でエリアからはみ出した文字を三点リーダー(…)で省略する方法」でした。

システムトラストでは一緒に働いていただける仲間を募集中です。
記事内に広告が含まれています。
株式会社システムトラスト

システムトラストでは、システムエンジニア、プログラマーなどを随時募集中です。気軽にご相談ください。

お問合せ