Agile育成ブログ
未来を変える喜びを
HTML

Overflow


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

要素からはみ出したコンテンツの表示方法を指定できます。

visible

高さ:50px、幅50pxのボックスを設定した場合overflowがvisibleだとボックスからはみ出た部分はそのまま表示されます。

<p class="example">あいうえおあいうえおあいうえお</p>
.example {
  width: 50px;
  height: 50px;
  overflow: visible;
  background: skyblue;
}

横にはみ出た文字を折り返したいとき

white-spaceをnowrapにすることで改行しない。normalにすれば右端で行が折り返されることになります。

hidden

overflow:hiddenを指定すると要素のボックスからはみ出た部分は隠れて見えなくなります。

scroll

overflow:scrollを指定するとはみ出た部分をスクロールにより表示することができるようになります。

横方向にスクロール

縦方向のスクロールではなく横方向でスクロールするにはwhite-space:nowrapを指定すると可能です。

auto

ブラウザに自動で設定させることができます。

You cannot copy content of this page