CSS: Overflow

有時候會有元素太大導致超出父元素的問題，這就叫做overflow(特別容易發生在有設定高度的元素中)，以下面為例:

可以看到文字超出了parent

通常的作法是不設定高度，讓元素按照內容去伸展高度，但如果說我今天就是希望這個元素這麼高，這時候就可以使用overflow這個屬性

Overflow

• visible

.box{
	overflow: visibile;
}

預設值，呈現效果等同上面的例子。

• hidden

將overflow的元素藏起來

box{
	overflow: hidden;
}

可以看到多餘的部分都消失在元素內了。

• scroll

.box{
	overflow: scroll;
}

讓子元素保持在父元素內，可以用上下左右滾動的方式看到超過的部分。

• auto、overlay

  .box{
  	overflow: auto;
  }

讓子元素保持在父元素內，和scroll不同，只能用上下滾動的方式看到超過的部分。
而overlay和auto相同，只是不同瀏覽器支援不同語法。