1. ホーム
  2. CSS

【CSS】overflow と text-overflow の使い方｜はみ出しの制御と「…」省略表示

Share

決まった幅や高さのボックスに、収まりきらない長さのテキストや要素を入れると、はみ出して見た目が崩れてしまうことがあります。そんなときに役立つのが overflow プロパティです。この記事では、はみ出した中身を隠す・スクロールさせるといった制御の仕方と、長いテキストを「…」で省略する text-overflow の使い方を、初心者の方にも分かるように解説します。

overflow プロパティとは

overflow は、要素の中身がボックスの大きさを超えてはみ出したときに、その部分をどう扱うかを決めるプロパティです。サイズが固定されたボックスに長い文章や大きな画像が入ると、初期状態では枠の外まで中身が表示されてしまいます。overflow を使うと、そのはみ出しを隠したりスクロールさせたりとコントロールできます。

はみ出しが起きるのは、width や height で要素の大きさを固定している場合がほとんどです。高さを指定せず中身に合わせて伸びる要素では、そもそもはみ出しが発生しないため overflow も働きません。

指定できる値と効果

overflow には主に次の4つの値を指定できます。値ごとに、はみ出した中身の扱い方が変わります。

値効果
visible初期値。はみ出した中身をそのまま枠の外に表示する
hiddenはみ出した部分を切り取って隠す（スクロールバーは出ない）
scroll常にスクロールバーを表示し、スクロールで中身を見られるようにする
autoはみ出したときだけスクロールバーを表示する

「はみ出すかどうか分からないが、はみ出すならスクロールさせたい」という場面では auto が扱いやすく、実務でもよく使われます。常にスクロールバーの領域を確保しておきたいときは scroll を選びます。

基本の使い方

高さを固定したボックスに長い文章を入れ、overflow: auto; で縦スクロールできるようにした例です。

style.css
.box {
  width: 300px;
  height: 120px;       /* 高さを固定する */
  border: 1px solid #ccc;
  padding: 12px;

  /* はみ出したらスクロールバーを出す */
  overflow: auto;
}

このように高さを 120px に固定したうえで overflow: auto; を付けると、中身が 120px を超えたときだけ縦スクロールバーが現れ、枠の中でスクロールして読めるようになります。

長いテキストを「…」で省略する

カードの見出しやファイル名など、1行に収めたいテキストがはみ出すときは、末尾を「…」で省略すると見た目が整います。これを実現するには text-overflow: ellipsis; を使いますが、単体では効かず、次の3つをセットで指定するのがポイントです。

  • overflow: hidden; … はみ出した部分を隠す
  • white-space: nowrap; … 折り返しを禁止して1行に保つ
  • text-overflow: ellipsis; … はみ出した末尾を「…」にする

下のエディタは値を書き換えると右側のプレビューに反映されます。.title の text-overflow を clip に変えたり、white-space: nowrap; を消したりして、表示がどう変わるか試してみてください。

<div class="card">
  <p class="title">これはとても長いタイトルで、1行の幅には収まりきらないほどの文字数があります</p>
  <p class="desc">説明文はそのまま折り返して表示されます。</p>
</div>

.card {
  width: 260px;
  border: 1px solid #ddd;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: sans-serif;
}

.title {
  /* 1. はみ出した分を切り取って隠す */
  overflow: hidden;
  /* 2. 折り返しを禁止して1行に保つ */
  white-space: nowrap;
  /* 3. はみ出した部分を「…」で省略表示 */
  text-overflow: ellipsis;
  margin: 0 0 8px;
  font-weight: bold;
}

.desc {
  margin: 0;
  color: #555;
  font-size: 14px;
}
Preview

.title には3点セットが効いているため末尾が「…」になり、.desc は指定がないので普通に折り返して表示されます。text-overflow はあくまで「はみ出した1行のテキストの末尾」を加工するプロパティなので、折り返しを止める white-space: nowrap; と、はみ出しを隠す overflow: hidden; がそろって初めて期待どおりに働きます。

横方向だけ・縦方向だけ制御する

はみ出しを縦と横で別々に扱いたいときは、overflow-x（横方向）と overflow-y（縦方向）を使います。たとえば横長の表を「縦は伸ばし、横だけスクロール」させたいときに便利です。

style.css
.table-wrap {
  /* 横方向だけスクロールできるようにする */
  overflow-x: auto;
  /* 縦方向ははみ出させない（隠す） */
  overflow-y: hidden;
}

なお overflow: auto; のように値を1つ書いた場合は、縦・横の両方に同じ値が適用されます。片方だけ挙動を変えたいときに overflow-x / overflow-y を使う、と覚えておくとよいでしょう。

省略の「…」が表示されないとき

white-space: nowrap を付け忘れている

「…」が出ない原因として一番多いのが、折り返しを止めていないケースです。white-space: nowrap; がないとテキストは自動で折り返してしまい、1行に収まらない「はみ出し」が発生しません。はみ出しが起きなければ text-overflow も働かないので、まずこの指定があるかを確認しましょう。

要素に幅の上限がない

テキストが入る要素自体が中身に合わせて横に伸びてしまうと、いつまでもはみ出しが起きず省略されません。width や max-width で幅の上限を決めるか、Flex アイテムの場合は min-width: 0; を付けて縮めるようにすると、意図どおり「…」が表示されます。

overflow: hidden を指定していない

text-overflow: ellipsis; は「overflow で隠された境目」に「…」を描くプロパティです。そのため overflow が初期値の visible のままだと、はみ出した文字がそのまま見えてしまい省略記号は出ません。overflow: hidden;（または scroll / auto）が指定されているかを確認してください。

まとめ

overflow と text-overflow は、サイズを固定したボックスのはみ出しを上手に扱うためのプロパティです。要点を振り返っておきましょう。

  • overflow は visible / hidden / scroll / auto ではみ出しの扱いを決める
  • はみ出すか分からないときは auto が扱いやすい
  • 1行テキストの「…」省略は overflow: hidden;＋white-space: nowrap;＋text-overflow: ellipsis; の3点セット
  • 縦横で挙動を分けたいときは overflow-x / overflow-y を使う

はみ出しによるレイアウト崩れは、原因さえ分かれば overflow 系のプロパティで素直に解決できます。固定サイズのボックスを扱うときの定番テクニックとして、ぜひ覚えておいてください。

参考ページ