こんにちは！フロントエンドの世界へようこそ。
Web制作を始めたばかりの頃、誰もが一度は「あれ、文字が枠からはみ出してる…！」という経験をしますよね。せっかく綺麗に組んだレイアウトなのに、ユーザーが入力した長い名前や、どこかから持ってきた長い英文が枠を突き破って台無しにしてしまう。これ、本当に悲しい気持ちになります。
でも、安心してください。これはWeb制作の「あるある」であり、プロでも最初に必ずぶつかる壁です。今日は、そんな暴れん坊なテキストたちを、CSSという魔法を使って優しく、スマートに制御する方法を一緒に学んでいきましょう。
—
テキストのオーバーフローは「行列の整理」だと考えよう
想像してみてください。あなたは今、大人気のパン屋さんの行列を整理する係員さんです。
お店の入り口（枠）は決まっているのに、お客さん（テキスト）がどんどんやってきて、歩道（レイアウト）にはみ出してしまいます。
この時、私たちは主に3つの対策をとることができます。
1. 「列を折り返す」（word-break / overflow-wrap）
2. 「入りきらない分は隠す」（overflow: hidden）
3. 「省略記号をつけて、続きがあることを伝える」（text-overflow: ellipsis）
さあ、具体的に見ていきましょう！
—
1. 文字を「折り返す」：あふれる前に列を作る
まずは基本の「折り返し」です。日本語と英語では、文字のルールが少し違います。
- 日本語： どこでも切れるので、比較的お利口さんです。
- 英語： 単語単位で切れるので、長い英単語があると枠を突き破ってしまいます。
そんな時に使うのが `overflow-wrap: break-word;` です。「単語の途中でもいいから、枠にぶつかったら折り返してね！」という魔法の言葉です。
.box {
width: 200px;
border: 1px solid #ccc;
/ 単語が長くても、枠で強制的に折り返します /
overflow-wrap: break-word;
}
—
2. はみ出した分を「隠す」：見た目を整える
どうしても枠を広げたくない、どんなに長くても1行で収めたい！というストイックなレイアウトもありますよね。そんな時は、溢れた分をバッサリ隠してしまいましょう。
.single-line {
width: 200px;
white-space: nowrap; / 1行で表示する（改行させない） /
overflow: hidden; / はみ出した部分は隠す /
}
これで、はみ出た部分は見えなくなります。でも、これだとユーザーは「続きがあること」に気づけませんよね。そこで登場するのが、次のテクニックです。
—
3. 「…」で省略する：プロの気遣い
最後に、入りきらなかった部分に「…」をつける方法です。これができると、一気にサイトのクオリティがプロっぽくなります。
以下の3つをセットで覚えてしまいましょう。
.ellipsis-text {
width: 200px;
white-space: nowrap; / 1. 1行で表示する /
overflow: hidden; / 2. はみ出た分を隠す /
text-overflow: ellipsis; / 3. はみ出た分を「…」にする /
}
これだけで、「あ、この後ろにも文章が続いてるんだな」とユーザーに優しく伝えることができます。
—
少しだけ応用編：複数行で「…」を表示したい！
最近のWebデザインでは「2行目まで表示して、3行目から『…』にする」というリクエストも多いです。これは少しだけ書き方が変わりますが、怖がらないでくださいね。
.multi-line-ellipsis {
display: -webkit-box; / ボックスを柔軟に並べる準備 /
-webkit-line-clamp: 2; / 2行で制限する /
-webkit-box-orient: vertical; / 縦方向に並べる /
overflow: hidden; / はみ出た分を隠す /
}
`-webkit-line-clamp` という数字を変えるだけで、3行にも4行にも調整できます。これ、現場でもめちゃくちゃ使います。ぜひ覚えて帰ってくださいね！
—
最後に：完璧を目指さなくて大丈夫
CSSでのテキスト制御は、画面の幅が変わる「レスポンシブデザイン」の世界では非常に重要です。でも、最初からすべてを完璧にこなすのは難しいものです。
まずは、「あ、はみ出してる！」と気づくこと。 それだけで、あなたはもうフロントエンドの視点を持ったエンジニアの卵です。
もしうまくいかないときは、その要素に `border: 1px solid red;` をつけてみてください。「どこまでが枠で、どこからがはみ出しているのか」が視覚的にわかって、解決のヒントが見えてきます。
焦らず、一つずつ自分の道具箱にテクニックを増やしていきましょう。応援しています！
コメント