はみ出した文字を「…」でスマートに隠す！CSSでテキストを省略する方法をマスターしよう
Webサイトを作っていると、一度はこんな悩みにぶつかりませんか？
「ニュースのタイトル一覧を作りたいけれど、文字数がバラバラでレイアウトが崩れちゃう…」
「スマホで見ると、長い名前が改行されてデザインが台無しに！」
せっかく綺麗に組んだカードデザインも、中身の文字が長すぎるとガタガタになってしまいますよね。そんな時、プロの現場で必ず使うのが「text-overflow: ellipsis」という魔法のルールです。
今日は、この「はみ出した文字を『…』に変える」テクニックを、初心者の方でも迷わないようにじっくり解説しますね。
—
そもそも、なぜ文字は「はみ出す」のか？
私たちが普段使っているHTMLの要素（``や``など）は、素の状態だと「中身に合わせてどんどん横に伸びる」という性質を持っています。
例えるなら、「中身の量に合わせて、どこまでも伸び続けるゴムの容器」のようなもの。これだと、画面の幅が狭いスマホで見ると、どうしても文字が入りきらずに「ガシャン！」と下に落ちたり、枠からはみ出したりしてしまうんです。
これを防ぐには、「ここから先は表示しないよ！」という制限をCSSで教えてあげる必要があります。
—
3つのステップで「…」を表示する！
実は、「…」を表示させるには、単に「はみ出すな」と言うだけでは足りません。以下の3つのルールをセットで使うのが、このテクニックの「お約束」です。
1. 幅を決める（どこまで表示するか）
2. 改行を禁止する（1行に収める）
3. はみ出しを隠して「…」を表示する（これが本丸！）
さっそく、コードを見てみましょう。
実践サンプルコード
.text-ellipsis {
/ 1. 幅を制限する（これがないと、どこまでが範囲かわかりません） /
width: 200px;
/ 2. 「ホワイトスペース（空白や改行）を無視して、一行で表示せよ！」という命令 /
white-space: nowrap;
/ 3. はみ出した部分は隠すよ /
overflow: hidden;
/ 4. はみ出した部分を「…」にするよ /
text-overflow: ellipsis;
}
なぜこの3つが必要なの？
少しややこしく感じるかもしれませんが、イメージは「お弁当箱」です。
- `width`: お弁当箱のサイズを決める。
- `white-space: nowrap`: おかず（文字）を無理やり横一列に押し込む。
- `overflow: hidden`: お弁当箱から飛び出したおかずを切り落とす。
- `text-overflow: ellipsis`: 飛び出した切り口に「…」というシールを貼る。
こう考えると、なんだか愛着が湧いてきませんか？
—
注意点：インライン要素の落とし穴
ここで一つ、つまずきやすいポイントをお伝えします。
``や``などの「インライン要素」に、いきなり上記のCSSを書いても、実は上手く動かないことがあります。なぜなら、これらの要素は「幅（width）」を持てない性質があるからです。
そんな時は、CSSで「display: block;」または「display: inline-block;」を追加してあげてください。これで、要素が「箱」として認識され、無事に「…」が表示されるようになります。
.link-item {
display: inline-block; / これで箱として機能するようになります！ /
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
—
まとめ：怖がらなくて大丈夫！
「CSSってルールが多くて難しい…」と落ち込む必要は全くありません。最初はみんな、この「…」が出なくて四苦八苦するものです。
もし動かないなと思ったら、以下のチェックリストを確認してみてください。
- `width` はちゃんと指定されているかな？
- `white-space: nowrap` を書き忘れていないかな？
- `display: block`（または `inline-block`）にして「箱」にしてあげたかな？
この3つさえ押さえておけば、あなたのWebサイトは格段にスマートでプロらしい見た目になります。ぜひ、ご自身のプロジェクトで試してみてくださいね。
もし分からないことがあれば、いつでもまた聞きに来てください。一緒に一つずつ解決していきましょう！
コメント