【初心者向け】マンガでわかる!overflow: hidden; の意味と使い方

   

まず最初に、マンガでイメージを掴みましょう

ソースコードにするとこんな感じ

ブラウザ表示

解説

<p>内のテキストが親要素<div class=”box”>の幅・高さ100pxに入りきらなくて、はみ出ちゃってるんですね。

ここで<div class=”box”>に対して・・

overflow:hidden;

すると

サァァ・・

き、消えた?!

こ、これが貴様の『能力』ッ・・!!

おしまい!!

 - エンジニアへの道