シュウ

今回は【CSS】テキストを1行で省略（…）表示する方法!
の解説になります！

• 一覧ページのデザインを整えたい方
  記事一覧や商品一覧で、タイトルの長さがバラバラでレイアウトが崩れてしまう方です。
• text-overflowを使ったことがない方
  「…」で省略する方法は知っているものの、なぜ複数のプロパティが必要なのか分からない方です。
• flexbox内で省略がうまくいかない方
  横並びレイアウトの中でテキストを省略したいのに、「…」が表示されず困っている方です。

テキストを1行で省略表示するとは

記事一覧やカード型のUIでは、タイトルの長さがバラバラになりがちです。
長いテキストをそのまま表示すると、改行されてカードの高さが揃わなかったり、レイアウトが崩れたりします。

そこで便利なのが、はみ出した部分を「…」で省略する表示方法です。
CSSだけで実装でき、JavaScriptも不要です。
完成イメージは以下のようになります。

<p class="ellipsis">ここに長いテキストが入ります。ここに長いテキストが入ります。</p>

3つのCSSプロパティの役割から、flexbox内で省略されない場合の対処法、省略時だけツールチップを表示する方法まで、実際のサンプルコードをもとに解説します。

1行省略表示 HTML編

今回使用するHTMLは、divで囲んだ中に、省略したいテキストを配置するシンプルな構造です。
書き方は以下のようになります。

<div class="ellipsis-box">
    <p class="ellipsis">ここに長いテキストが入ります。ここに長いテキストが入ります。ここに長いテキストが入ります。</p>
</div>

省略表示は、テキストが親要素の幅を超えたときに働きます。
そのため、widthやmax-widthで幅を決めておくことが大切です。

1行省略表示 CSS編

次に、CSSで省略表示のスタイルを指定します。
ポイントは、3つのプロパティをセットで指定することです。
書き方は以下のようになります。

/*--省略表示の幅を指定--*/
.ellipsis-box {
    max-width: 300px;
}

/*--1行で省略表示するスタイル--*/
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

・3つのプロパティはセットで使う
text-overflow: ellipsis; だけを指定しても、省略表示にはなりません。
white-space: nowrap; で折り返しを止め、overflow: hidden; ではみ出しを隠すことで、初めて「…」が表示されます。

・flexbox内で省略されない場合
flexコンテナの子要素に省略表示を適用する場合は、min-width: 0; を追加します。
flexアイテムは初期状態でコンテンツ幅より小さくならないため、この指定がないと「…」が表示されません。
書き方は以下のようになります。

/*--flexbox内で省略表示する場合--*/
.flex-row {
    display: flex;
    gap: 10px;
}

.flex-row .ellipsis {
    min-width: 0;
    flex: 1;
}

・複数行で省略したい場合
2行や3行で省略したい場合は、-webkit-line-clamp を使用します。
1行省略とは指定方法が異なるため、今回は割愛します。

1行省略表示 JavaScript編

CSSだけで省略表示は完成しますが、省略された部分の内容は読者には見えません。
そこでJavaScriptを使い、省略されているテキストにだけツールチップ（title属性）を付けると、マウスを合わせたときに全文を確認できて便利です。
書き方は以下のようになります。

<script>
const ellipsisItems = document.querySelectorAll('.ellipsis');

ellipsisItems.forEach(item => {
    if (item.scrollWidth > item.clientWidth) {
        item.setAttribute('title', item.textContent.trim());
    }
});
</script>

まとめ

今回はこれで以上です。
今回は、CSSでテキストを1行で省略（…）表示する方法を紹介しました。
white-space・overflow・text-overflowの3つをセットで指定するだけで、長いテキストをすっきり表示できます。
また、flexbox内ではmin-width: 0;を追加し、JavaScriptで省略時だけツールチップを付けると、読者が全文を確認しやすくなります。
一覧ページやカードUIを作る際は、ぜひ活用してみてください。

テンプレートを見る

Web・デザインの本棚を見る

< 前の記事

【JavaScript】HTML・CSSでコピーボタン付きコードブロックを作成する方法

次の記事 >

【jQuery】簡単にモーダルを設置、Modaal.jsの使い方を解説!