CSS - overflow 屬性

CSS 的 overflow 屬性指定如何處理超出其容器邊界的溢位內容。它可以用來裁剪內容、新增捲軸或顯示省略號。該屬性僅適用於指定了高度或寬度的塊級元素。

語法

overflow: visible | hidden | clip | scroll | auto | initial | inherit;

屬性值

值	描述
visible	內容不會被裁剪，並將溢位容器。
hidden	內容會被裁剪，溢位內容不可見。沒有捲軸，裁剪的內容不可見。
clip	當內容超出其框時會被裁剪。
scroll	在容器中新增捲軸，以便使用者可以滾動檢視溢位的內容。
auto	僅當內容溢位時，才會在容器中新增捲軸。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS Overflow 屬性示例

以下示例說明了使用不同值的 overflow 屬性。

使用 Visible 值的 Overflow 屬性

如果內容的長度大於元素的大小，要顯示超出其大小的元素內容，我們使用 visible 值。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         height: 100px;
         width: 200px;
         background-color: lightgreen;
         overflow: visible;
      }
   </style>
</head>

<body>
   <h2>
      CSS overflow property
   </h2>
   <h4>
      overflow: visible
   </h4>
   <p>
      TutorialsPoint is an online learning platform 
      offering a wide range of tutorials, courses, 
      and resources in programming, web development, 
      data science, and more, catering to beginners 
      and advanced learners alike. 
   </p>
</body>

</html>

使用 Hidden 值的 Overflow 屬性

要僅顯示元素內容中其大小可以容納的部分，並截斷任何額外的內容，我們使用 hidden 值。使用此值，頁面佈局仍會受到影響，因為該值僅隱藏額外內容，但不會刪除其佔用的空間。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         height: 100px;
         width: 200px;
         background-color: lightgreen;
         overflow: hidden;
      }
   </style>
</head>

<body>
   <h2>
      CSS overflow property
   </h2>
   <h4>
      overflow: hidden
   </h4>
   <p>
      TutorialsPoint is an online learning platform 
      offering a wide range of tutorials, courses, and 
      resources in programming, web development, data 
      science, and more, catering to beginners and advanced 
      learners alike. 
   </p>
</body>

</html>

使用 Clip 值的 Overflow 屬性

要僅顯示元素內容中其大小可以容納的部分，並截斷任何額外的內容，我們使用 chop 值。使用此值，頁面佈局不會受到影響，因為截斷的部分無法訪問。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         height: 100px;
         width: 200px;
         background-color: lightgreen;
         overflow: clip;
      }
   </style>
</head>

<body>
   <h2>
      CSS overflow property
   </h2>
   <h4>
      overflow: clip
   </h4>
   <p>
      TutorialsPoint is an online learning platform 
      offering a wide range of tutorials, courses, and 
      resources in programming, web development, data 
      science, and more, catering to beginners and advanced 
      learners alike. 
   </p>
</body>

</html>

使用 Scroll 值的 Overflow 屬性

使用 scroll 值，即使內容的大小完全適合元素，也會在元素的水平和垂直方向上新增捲軸。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         height: 100px;
         width: 200px;
         background-color: lightgreen;
         overflow: scroll;
      }
   </style>
</head>

<body>
   <h2>
      CSS overflow property
   </h2>
   <h4>
      overflow: scroll
   </h4>
   <p>
      TutorialsPoint is an online learning platform 
      offering a wide range of tutorials, courses, and 
      resources in programming, web development, data 
      science, and more, catering to beginners and advanced 
      learners alike. 
   </p>
</body>

</html>

使用 Auto 值的 Overflow 屬性

使用 auto 值，僅當元素的內容超出元素的大小才會向元素新增捲軸，如果內容完全適合元素的大小，則不會出現捲軸。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         height: 100px;
         width: 200px;
         background-color: lightgreen;
         overflow: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS overflow property
   </h2>
   <h4>
      overflow: auto
   </h4>
   <p>
      TutorialsPoint is an online learning platform 
      offering a wide range of tutorials, courses, and 
      resources in programming, web development, data 
      science, and more, catering to beginners and advanced 
      learners alike. 
   </p>
</body>

</html>

支援的瀏覽器

屬性
overflow	1.0	4.0	1.0	1.0	7.0

css_properties_reference.htm

列印頁面