CSS overflow

Posted on Edited on In Views: Disqus:

 

overflow 屬性是用來判斷當內容超過元素的邊界時，決定內容是否顯示、隱藏、卷軸...等效果。

其值可為 visible(預設值)、hidden、scroll、auto

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 500px;
            border: 3px solid #8AC007;
        }

        .over-visible {
            overflow: visible;
        }

        .over-hidden {
            overflow: hidden;
        }

        .over-scroll {
            overflow: scroll;
        }

        .over-auto {
            overflow: auto;
        }
    </style>
</head>
<body>

    <div class="over-visible">
        <img class="img1" src="http://i.imgur.com/XIOFScv.jpg" alt="W3Schools.com" width="600" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
    </div>

    <br>

    <div class="over-hidden">
        <img class="img2" src="http://i.imgur.com/XIOFScv.jpg" alt="W3Schools.com" width="600" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
    </div>

    <br>

    <div class="over-scroll">
        <img class="img3" src="http://i.imgur.com/XIOFScv.jpg" alt="W3Schools.com" width="600" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
    </div>

    <br>

    <div class="over-auto">
        <img class="img4" src="http://i.imgur.com/XIOFScv.jpg" alt="W3Schools.com" width="600" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
    </div>

</body>
</html>

特別注意到overflow屬性值為auto時，

當邊界寬度不夠圖片寬度時，則會自動使用卷軸效果;

當邊界寬度夠大圖片寬度時，則會自動套用visible效果。

 

除了 overflow 屬性之外，overflow-x 與 overflow-y 屬性更可以個別針對 x 軸與 y 軸作設定，

其值可為 visible(預設值)、hidden、scroll、auto。