CSS中的溢出屬性對於創建包含大量內容的吸引人的外觀網站至關重要。繼續閱讀，以更熟悉溢出！
該CSS溢出屬性指定在什麼內容的情況下做的太大，以適應集裝箱箱。它指定了滾動條是否應該出現，或者內容是否被剪切。
overflow屬性是overflow-x和overflow-y的縮寫。overflow-x屬性指定處理水平方向的溢出，而overflow-y指定處理垂直方向的溢出。
在瞭解這一點時，瞭解一些更多關於定位的知識是有用的。
值
溢出屬性可以具有不同的值：
- 可見 - 內容可以在框外呈現。
- 隱藏 - 內容被剪切並且不顯示滾動條。
- 滾動 - 內容被剪輯並顯示必要的滾動條。
- 自動 - 瀏覽器決定如何處理內容，它可以因瀏覽器而異，但通常滾動條會根據需要顯示。
overflow屬性僅適用於塊，inline-block和table元素。
句法
以下語法用於定義溢出屬性：
div {
overflow: hidden;
}
例子
現在，讓我們回過頭來舉一些例子。使用文本時，它應該有適當的格式。
HTML
Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.
CSS
div {
height: 200px;
width: 200px;
border: solid thin blue;
background-color: #fafafa;
overflow: visible;
}
在上面的示例中，我們將溢出設置為可見，並且內容溢出框。
HTML
Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.
CSS
div {
height: 200px;
width: 200px;
border: solid thin blue;
background-color: #fafafa;
overflow: hidden;
}
在第二個示例中，我們將overflow屬性設置為隱藏。內容被剪輯並且沒有滾動條可見。
HTML
Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.
CSS
div {
height: 200px;
width: 200px;
border: solid thin blue;
background-color: #fafafa;
overflow: scroll;
}
在第三個例子中，我們設置了overflow屬性來滾動。在這種情況下，內容溢出容器外，滾動條出現。
HTML
Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.
CSS
div {
height: 200px;
width: 200px;
border: solid thin blue;
background-color: #fafafa;
overflow-y: scroll;
overflow-x: hidden;
}
最後，我們可以看到overflow-y屬性的用法。我們只看到垂直滾動條是可見的，而水平滾動條是隱藏的。
概要
在這個簡短的教程中，我們已經解釋了溢出屬性。希望當你開始你的下一個項目時，它會有所幫助。
閱讀更多 愛碼農 的文章
