CSS3中的overflow屬性可以控制元素內(nèi)部內(nèi)容超出邊界的顯示方式,常用的值包括:
.overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; }
其中,overflow: hidden可以將元素內(nèi)部內(nèi)容溢出的部分隱藏起來。比如:
.container { width: 200px; height: 200px; overflow: hidden; } .container img { width: 300px; height: 300px; }
上面的代碼中,容器的寬高都是200px,但是容器中的圖片卻有300px寬和高,因此超出了容器的邊界。但是由于設(shè)置了overflow: hidden,圖片超出的部分將被隱藏起來,不會影響其他內(nèi)容的顯示。
值得注意的是,使用overflow: hidden時,如果元素的寬度或高度小于內(nèi)部內(nèi)容的寬度或高度,超出的部分仍然會被隱藏。因此在設(shè)置元素的寬高時,要注意內(nèi)部內(nèi)容是否超出邊界。