在網頁布局中，我們常常需要設置固定的高度或寬度來使元素的大小不會隨著內容的增多或減少而改變。然而，當該元素中的內容超出設定的尺寸時，就會出現滾動條。接下來，我們將介紹CSS出現滾動條的條件：

p {
height: 100px;
overflow: auto;
}

1. overflow屬性設為auto或scroll

overflow屬性規定當元素的內容體超過指定尺寸后發生的事情。當overflow屬性被設為auto或scroll時，會出現滾動條。auto表示自動出現滾動條（僅當內容超出指定尺寸時），scroll表示始終出現滾動條，無論內容是否超出指定尺寸。

p {
height: 100px;
white-space: nowrap;
}

2. white-space屬性設為nowrap

white-space屬性規定元素中的空白如何處理。當該屬性的值被設為nowrap時，文本不會被換行并會生成橫向滾動條，直到文本能夠適應指定尺寸為止。

p {
height: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

3. 使用text-overflow屬性來省略文本

當文本過長時，使用text-overflow屬性能夠在指定的尺寸內只顯示一部分內容并且顯示省略號。使用text-overflow屬性前需設置white-space屬性為nowrap和overflow屬性為hidden。屬性值為ellipsis時，文本末尾用省略號表示被省略的文本。

在以上情況下，CSS將自動為我們生成對應的滾動條，使我們能夠滾動查看被隱藏的內容。