在網頁設計中，我們經常需要使用div來實現頁面布局。然而，有時候我們需要讓div元素中的內容超出其容器限定的范圍。這時候，我們可以使用overflow屬性來控制超出區域的顯示方式。

下面是overflow屬性的四個取值：

overflow: visible;   /* 默認值，超出部分可見 */
overflow: hidden;    /* 超出部分隱藏 */
overflow: scroll;    /* 超出部分滾動條 */
overflow: auto;      /* 根據情況自動選擇上面三種當中的一種 */

其中，最常用的應該就是hidden，它可以讓超出部分完全隱藏，不占用頁面空間。

<div class="container">
<p>這是一個容器，它只能顯示 100px 的高度。</p>
<p>這是超出部分，我們需要隱藏它。</p>
</div>
.container {
height: 100px;
overflow: hidden;
}

使用overflow: hidden;可以讓超出部分完全隱藏，達到驚艷的效果。

除此之外，還有一些其他的屬性也可以實現超出區域的效果，如text-overflow: ellipsis;可以在一行文字太長時省略多余文字并在結尾加上省略號。

<div class="container">
<p>這是一個容器，它只能顯示 100px 的高度。</p>
<p>這是超出部分，我們需要隱藏它。</p>
</div>
.container {
height: 100px;
overflow: hidden;
}
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

以上是關于使用 CSS 控制div超出部分的隱藏方法，希望對大家有所幫助。