はみ出した文章は消えた？overflowのhiddenとautoを作例で比べよう

説明文の下のほうが見えない。HTMLから消えたのではなく、箱の高さとoverflowの指定で見えなくなっているかもしれないよ。overflowは、箱からはみ出した内容の扱いを決めるCSSだよ。

この記事では、hiddenとautoの違いを、同じ文章が入った小さな箱で理解する。ブラウザだけで作例を操作でき、入力や保存は必要ない。

高さを固定した箱で比べる

.panel {
  height: 120px;
  overflow: auto;
}

heightで箱の高さを固定すると、中身が長い場合に全部は収まらない。autoは、はみ出したときにスクロールして内容をたどれる指定だよ。スクロールバーの見た目や常時表示の有無は、OSやブラウザの設定でも変わる。

内容が収まっていると、指定の違いが見えにくい。まず作例で長い文章を表示し、下へ続く状態にしよう。

hiddenは、内容の削除ではない

.panel {
  height: 120px;
  overflow: hidden;
}

hiddenでは、はみ出した部分が見えず、通常のスクロールバーも出ない。ただし内容そのものが消えるわけではない。hiddenの箱も、スクリプトなどでスクロール位置を変更できる。

作例では「下へ60px動かす」を押すと、autoでもhiddenでもscrollTopを変えられる。この違いを含めると、「hiddenなら絶対にスクロールしない」とは説明できないことが分かるよ。

三つの数値を確認する

scrollHeightがclientHeightより大きければ、中身が縦にはみ出していると確認できる。スクロールバーが目立たないだけなのか、そもそも内容が短いのかを分けて見よう。

ページ内で試そう

1. autoの状態で、箱の中をスクロールして最後の行を見る。
2. hiddenへ切り替える。スクロール位置は先頭へ戻る。
3. 「下へ60px動かす」を押し、表示とscrollTopの変化を比べる。
4. autoへ戻し、同じ内容が残っていることを確認する。
5. 「最初から試す」で初期状態へ戻す。

編集部ではChromiumで、両方の指定とscrollTopの変化、内容が残ること、リセットを確認した。画面読み上げソフトでの実機確認や、全OSのスクロールバー表示を比較したものではないよ。

文章全体を見せたい場合は高さも見直す

全部をページの流れの中で読ませたいなら、高さの固定が本当に必要かを考える。スクロールさせる設計と、内容に合わせて箱を伸ばす設計は別の選択だよ。

heightとmin-heightで伸びる箱を比較し、ズームとリフローの確認では文字を大きくした状態も確かめてみよう。