【入門編】text-overflow: ellipsisによる省略記号の表示 – HTML実践ガイド

画面からはみ出す文字をスマートに！「…」で省略する方法を優しく解説します

Webサイトを作っていると、一度はこんな悩みにぶつかりませんか？

「ニュースのタイトルが長すぎて、デザイン枠からはみ出してしまう……」
「カード型のレイアウトで、文字の長さがバラバラでガタガタに見える……」

これ、実はWeb制作の現場でも本当によくある悩みです。でも大丈夫。そんな時、CSSには「はみ出した分は、おしゃれに『…』で隠しちゃおう！」という魔法のようなテクニックがあるんです。

今日は、初心者の方でもすぐに使える`text-overflow: ellipsis`の実装術を、お買い物や整理整頓に例えながら紐解いていきましょう。

—

なぜ「文字がはみ出す」ことが問題なの？

例えば、街中で見かける「お弁当箱」を想像してみてください。お弁当箱のサイズが決まっているのに、おかずを詰め込みすぎたら蓋が閉まりませんよね。Webサイトも同じで、デザインの枠（コンテナ）から文字が溢れると、レイアウトが崩れて見栄えが悪くなってしまいます。

「じゃあ、文字を消せばいい？」
いえいえ、ただ消すだけでは情報が途切れて不親切です。そこで、「ここまでしか表示できないけれど、続きがあることは伝えるよ」という合図として、末尾に「…」を表示させるのがスマートな解決策というわけです。

—

魔法の呪文「3点セット」を覚えよう

実は、この「…」を表示させるには、CSSを3つセットで書く必要があるんです。これさえ守れば、もう怖くありません。

1. `white-space: nowrap;` （改行を禁止して、一行に収める！）
2. `overflow: hidden;` （枠からはみ出した部分は隠す！）
3. `text-overflow: ellipsis;` （はみ出した部分を「…」にする！）

さっそくコードを書いてみましょう

まずは、横幅を制限したボックスを用意して、そこに上記のルールを適用してみます。

.card-title {
/ 1. 幅を制限しないと隠れないので必須です /
width: 200px;

/ 2. 改行せずに一行に押し込める /
white-space: nowrap;

/ 3. はみ出した分は見えなくする /
overflow: hidden;

/ 4. はみ出した部分を「…」にする /
text-overflow: ellipsis;
}

たったこれだけで、どんなに長いタイトルが来ても、枠内で「……」と収まってくれるようになります。まるで、溢れそうな荷物を「これ以上は入りませんよ」と綺麗に整理整頓するような感覚ですね。

—

ちょっと応用編：インライン要素での注意点

ここで一つだけ、初心者がつまずきやすいポイントをお伝えします。

`` や `` タグのような「インライン要素」にこの設定をしても、実はうまく効かないことが多いんです。なぜなら、それらの要素は「文字の量に合わせて幅が決まる」という性質があるから。