HTML中的盒子有著不同的尺寸和位置，但有時候它們的內容太多了，就可能出現內容溢出盒子的情況。這時候，我們就需要使用CSS的overflow屬性來處理這種情況。
overflow屬性可以控制盒子的溢出內容，有以下幾個可選值：
1. visible（默認值）：內容會溢出到盒子外部，不會被剪切或隱藏。 2. hidden：內容會被剪切，隱藏在盒子內部，無法看到溢出的內容。 3. scroll：會在盒子內部顯示滾動條，用戶可以通過滾動條滾動溢出的內容。 4. auto：如果內容沒有溢出，則表現為visible，否則表現為scroll。
下面是一個實例，展示了一個帶有溢出內容的div盒子，使用不同的overflow值來顯示不同的效果。
通過這個實例，我們可以看到overflow屬性對于盒子中內容溢出的處理非常有效。使用它可以掌控頁面排版，讓網頁中的內容有著更好的呈現效果。
overflow屬性可以控制盒子的溢出內容，有以下幾個可選值：
1. visible（默認值）：內容會溢出到盒子外部，不會被剪切或隱藏。 2. hidden：內容會被剪切，隱藏在盒子內部，無法看到溢出的內容。 3. scroll：會在盒子內部顯示滾動條，用戶可以通過滾動條滾動溢出的內容。 4. auto：如果內容沒有溢出，則表現為visible，否則表現為scroll。
下面是一個實例，展示了一個帶有溢出內容的div盒子，使用不同的overflow值來顯示不同的效果。
<html> <body> <div style="width: 200px; height: 200px; border: 1px solid black; overflow: visible;"> <p>這是一段很長的文字，它會溢出到div的外邊界。然而，由于overflow的值為visible，所以這個div并不會隱藏或剪切文字內容，導致文字不被完全顯示。</p> </div>
<div style="width: 200px; height: 200px; border: 1px solid black; overflow: hidden;"> <p>同樣是一段很長的文字，但是這個div使用了hidden值，文字就被剪切隱藏在div內部，無法顯示溢出內容。</p> </div>
<div style="width: 200px; height: 200px; border: 1px solid black; overflow: scroll;"> <p>這一次，div使用了scroll值，允許用戶通過滾動條滾動溢出的內容。這樣，在div內部顯示出了完整的文字內容。</p> </div>
<div style="width: 200px; height: 50px; border: 1px solid black; overflow: auto;"> <p>最后一個div展示了auto值的效果。它會根據內容是否溢出，自動判斷是否需要顯示滾動條。如果實際沒有溢出，那么表現為visible。跟scroll不同，沒有溢出時不會顯示滾動條。</p> </div> </body> </html>
通過這個實例，我們可以看到overflow屬性對于盒子中內容溢出的處理非常有效。使用它可以掌控頁面排版，讓網頁中的內容有著更好的呈現效果。
上一篇css屬性設置盒模型