CSS overflow


tags: HTML CSS relate

tags: HTML, CSS

CSS overflow 屬性用來定義元素超過某個範圍的時候該如何呈現,例如圖片超過預設區域的大小、文字長度超出原本的範圍等,這時候你可以透過 CSS overflow 屬性來制定該區塊是否顯示 scrollbar(卷軸)或者是否要隱藏該元素。

CSS overflow 常見的值

  • overflow: auto; //預設會自動使用捲軸 (參考圖一)

  • overflow:visible;  //顯示的文字或圖片會直接超出範圍,不使用捲軸。(參考圖二)

  • overflow:hidden; //自動隱藏超出的文字或圖片。(參考圖三)

  • overflow:scroll; //自動產生捲軸。(參考圖四)連垂直方向都有捲軸

  • overflow:inherit; //繼承自父元素的可見性

  • overflow-x:hidden; 也可以指隱藏X軸或是Y軸的捲軸

  • overflow-y:auto; 也可以指隱藏X軸或是Y軸的捲軸

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →