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

打印页面