CSSを使って長い文章を三点リーダーで省略する方法

ECサイトを作成している際に、長すぎる商品名が表示されると、2行や3行に改行されてレイアウトが崩れてしまうことがあります。そんなとき、続きの部分を「…」と表示して一列に収める方法をご紹介します。

対処方法

CSSを使用して、長いテキストを省略表示にする方法を説明します。以下は、具体的な例です。

HTML

<div class="compact">2019年度〇〇賞受賞。福岡県産！〇〇米10kg</div>

CSS

.compact {
    width: 300px; /* 要素の横幅を指定 */
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* 溢れた部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
    -webkit-text-overflow: ellipsis; /* Safari用 */
    -o-text-overflow: ellipsis; /* Opera用 */
}

解説

width: 要素の横幅を指定します。この例では300pxに設定しています。
white-space: nowrapを設定することで、テキストが横幅の最大値に達しても改行されないようにします。
overflow: hiddenを設定して、要素の範囲外に溢れた部分を非表示にします。
text-overflow: ellipsisを指定することで、溢れたテキストを「…」と省略表示します。
-webkit-text-overflowと**-o-text-overflow**: それぞれSafariとOpera用のベンダープレフィックスです。

実際の使用例

例えば、以下のような商品名が長い場合でも、指定した幅内で「…」を使って省略され、レイアウトが崩れるのを防ぐことができます。

HTML

<div class="compact">この商品は非常に人気があり、売り切れ必至のアイテムです。今すぐご購入をお勧めします。</div>

CSS

.compact {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

この設定により、長い商品名や説明文が指定した幅を超えた場合でも、「…」で省略表示され、一列に収まるようになります。これで、ECサイトのレイアウトが整い、見やすさが向上します。