CSS 的 overflow 屬性
阿恆
從 DOM 技術的角度看,網頁中每一件物件都是「箱」狀的,一段文字、一幅圖像、一個連結,它們的長度、闊度、位置等等都可以由 CSS 控制,若果你沒有設定箱子的大小,它會隨著內容的多寡而自行調整,確保容納並顯示所有內容,但若果箱子的大小被限制了,卻又無法容納所有內容的時候,這時便是 CSS 的 overflow 屬性發揮作用的時候。
CSS Tricks 網站上 Chris Coyier 有一篇文章介紹 CSS 的 overflow 屬性,文章說,Overflow 的值可以是:visible (預設)、hidden、scroll 及 auto,它還有兩個「姊妹」屬性 overflow-x 及 overflow-y,但不是所有瀏覽器都支援。
Visible
若果你沒有設定 overflow 的值,預設就是 visible,所以除非你要撤銷從上層物件繼承下來的值,否則並不需要做這樣的設定。
|
|
樣本輸出:
可以看到倘若內容太多,它會從箱子的右邊和下邊溢出,溢出的部份是可見的。必須注意一點,溢出的部份不會影響版面的排列,若果箱子的後面有其他內容,情況就是這樣:
所以,當箱子內有文字的時候,我們不應硬性設定箱子的尺寸,又同時設定 overflow 為 visible (或不設定 overflow 的值,以致瀏覽器使用預設的 visible)。
Hidden
與預設的 visible 相反的是 hidden,它使所有滿溢到箱子外的內容完全消失。
倘若你的箱子內有動態內容,而你又不希望滿溢的內容搞亂頁面的排版,這個功能便適合你。注意除非用戶觀看頁面的原始碼,否則隱藏的內容是無法看得見的。所以當箱子內有文字的時候,一般不建議使用 hidden,萬一用戶使用了很大的字體,便會使部份文字被推到箱子外面而消失無蹤。
Scoll
把 overflow 屬性設定為 scroll 會使內容被限制在箱子裏面,並且會有一個橫/直的捲軸棒讓用戶觀看完整的內容:
這個設定會使瀏覽器在任何情況下都顯示捲軸棒,即使根本沒有需要:
Auto
Auto 跟 scoll 很相似,但它在不需要的時候會把捲軸棒隱藏起來: