こんにちは！Web制作の世界へようこそ。画面の中で文字が思い通りに並んでくれると、なんだか魔法を使っているような気分になりますよね。
でも、制作を進めていると必ず一度はぶつかる壁があります。それが「文字が枠からはみ出してしまう問題」です。
例えば、商品名が長すぎてレイアウトが崩れてしまったり、ユーザー名が長すぎて隣のアイコンを押し出したり……。そんな時、プロの現場では「あふれた部分は『…』で隠して、スッキリ見せる」というテクニックをよく使います。
今日は、そんな「スマートな省略記号」の作り方を、誰にでもわかるように紐解いていきましょう！
—
なぜ「インライン要素」は省略するのが難しいの？
HTMLには``や``、``のような「インライン要素」と呼ばれるものがありますよね。これらは文章の中にちょこんと座るのが得意な要素です。
実は、CSSの`text-overflow: ellipsis;`（文字があふれたら「…」にする魔法の呪文）は、「幅（width）」が決まっているブロック要素でしか基本的には効きません。
「じゃあ、インライン要素じゃ無理なの？」と不安になりますよね。大丈夫、コツさえ掴めばちゃんと実装できます！
—
魔法のレシピ：インライン要素を「省略可能」にする手順
インライン要素を省略させるためのポイントは、「一度、ブロック要素の性質を持たせてあげること」です。
お料理で例えるなら、柔らかいパン（インライン）を一度トースト（ブロック化）して、形を崩れないように固めてからカットする……そんなイメージです。
以下の3つのステップでCSSを書いてみましょう。
1. CSSのサンプルコード
まずは、そのままコピーして試せるコードを用意しました。
.ellipsis-text {
/ 1. インライン要素をブロックの性質に変える /
display: inline-block;
/ 2. 最大幅を決める（これを超えると省略される） /
max-width: 150px;
/ 3. ここが重要！改行を禁止して、はみ出した分を隠す /
white-space: nowrap; / 改行させない /
overflow: hidden; / はみ出た部分は見せない /
text-overflow: ellipsis; / はみ出た部分を「…」にする /
/ おまけ：枠にピッタリくっつくと綺麗に見えないので調整 /
vertical-align: bottom;
}
2. なぜこのコードで動くのか？
- `display: inline-block;`: これで、インラインの「文章の中にいられる性質」を保ちつつ、「幅（width）を指定できる」というブロックの強さを手に入れました。
- `white-space: nowrap;`: これがないと、文字は幅が狭くなった時に自動で「改行」してしまいます。あえて改行を禁止することで、横に一直線に並ばせます。
- `text-overflow: ellipsis;`: これが主役です。「はみ出した分は『…』に置き換えてね」というブラウザへの命令ですね。
—
つまずきやすいポイント：ここだけ注意！
この実装をする際、初学者がよく陥る罠があります。
「`max-width`を指定したのに効かない！」という場合は、親要素（この要素を囲んでいるタグ）の幅が狭すぎないかを確認してみてください。
例えば、狭いスマホの画面で`max-width: 300px`と指定しても、親の枠が200pxしかなければ、当然ですが200pxで切れてしまいます。「親の枠を超えては大きくなれない」というルールは、どんなに優秀なCSSでも超えられない物理法則のようなものなのです。
—
最後に：もっと便利に使いこなすために
今回は「1行だけ省略する」方法を紹介しましたが、最近では「3行目から先を『…』にする」といった、より高度なデザインも求められます。
でも、焦る必要はありません。まずは今日紹介した「1行をスッキリ隠す」テクニックを、自分のポートフォリオサイトや練習用のページで試してみてください。「おっ、綺麗に収まった！」という瞬間の感動は、何度味わっても最高ですよ。
もしうまくいかなくても大丈夫。コードを少しずつ書き換えて、ブラウザをリロードする。その繰り返しが、あなたを本当のプロフェッショナルへと育ててくれます。
それでは、また次回の記事でお会いしましょう！楽しいコーディングライフを！
コメント