Overflow: hiddenではみ出した部分を隠す

CSS の overflow

overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定する。

example.css

セレクタ {
  overflow: 値;
}

visible：初期値。はみ出た部分が、はみ出たままの状態で表示される場合あり
hidden：はみ出た部分が隠れる
scroll：はみ出た部分が隠れてスクロールできる状態に
auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）

overflow: visibleでそのまま表示

index.html

<p class="example">あいうえおあいうえおあいうえお</p>

app.css

.example {
  width: 50px;
  height: 50px;
  overflow: visible;
  background: skyblue;
}

overflow: hiddenで非表示に

app.css

.example {
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: skyblue;
}