overflow 屬性控制超出容器的元素內(nèi)容顯示方式。具體值有:visible:顯示溢出內(nèi)容hidden:隱藏溢出內(nèi)容scroll:添加滾動條auto:瀏覽器根據(jù)需要添加滾動條initial:重置為默認值inherit:繼承父元素屬性
overflow 在 CSS 中的作用
overflow 屬性控制瀏覽器如何處理超出其容器邊界的元素內(nèi)容。它決定了當元素的內(nèi)容溢出時,是否顯示、隱藏或滾動。
基本語法:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">overflow: [value];</code>
登錄后復制
其中,[value] 可以是以下值:
1. visible:顯示溢出的內(nèi)容,不應用任何剪裁。
2. hidden:隱藏溢出的內(nèi)容,使元素邊框內(nèi)看不到任何內(nèi)容。
3. scroll:添加滾動條,以便用戶可以滾動查看溢出的內(nèi)容。
4. auto:瀏覽器根據(jù)需要自動添加滾動條。
5. initial:將 overflow 屬性重置為瀏覽器默認值(通常是 visible)。
6. inherit:從父元素繼承 overflow 屬性。
舉例:
<code class="css">.container { width: 200px; height: 100px; overflow: hidden; } .content { width: 300px; height: 200px; }</code>
登錄后復制
在此示例中,容器的 overflow 屬性設(shè)置為 hidden,這意味著任何超出容器邊界的 .content 內(nèi)容都將被隱藏。
附加屬性:
overflow 屬性還與其他 CSS 屬性配合使用,以控制溢出行為:
overflow-x:僅控制水平溢出(overflow 的簡寫)。
overflow-y:僅控制垂直溢出(overflow 的簡寫)。
overflow-wrap:控制元素內(nèi)部文本的換行方式。