0%

CSS: Overflow

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

可以看到文字超出了parent

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

Overflow

  • visible
1
2
3
.box{
overflow: visibile;
}

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

  • hidden

將overflow的元素藏起來

1
2
3
box{
overflow: hidden;
}

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

  • scroll
1
2
3
.box{
overflow: scroll;
}

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

  • auto、overlay
    1
    2
    3
    .box{
    overflow: auto;
    }

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