CSS overflow是一个简写属性，指定如何处理溢出其容器边界的内容。它可用于剪辑内容、添加滚动条或显示省略号。

overflow 属性仅适用于具有指定高度或宽度的块级元素。 Overflow 属性可用于控制内容在水平和垂直方向上的溢出。

CSS 为 Overflow 属性提供了以下可能的值来处理溢出元素框的内容。

  • visible - 内容未被剪切并且会溢出容器。

  • hidden - 内容被剪切并且不会溢出可见的。没有滚动条，并且剪辑的内容不可见。

  • clip - 当内容超出其框时将被剪辑。这可以与 overflow-clip-margin 设置剪切区域。

  • scroll - 向容器添加滚动条，以便用户可以滚动查看溢出的内容。

  • auto - 仅当内容溢出时才会向容器添加滚动条。

CSS overflow: 可见和隐藏

以下示例演示如何将 CSS 溢出属性设置为可见或隐藏。默认值是可见的，这允许内容溢出其边界。隐藏值隐藏任何溢出的内容。

<html>
<head>
<style>
   .container {
      display: flex;
   }
   .overflow-visible {
      height: 130px;
      width: 250px;
      overflow: visible;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
      margin-right: 15px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   .overflow-hidden {
      height: 130px;
      width: 250px;
      overflow: hidden;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-visible">
         <h4>yxjc123.com CSS Overflow Visible</h4>
         <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
         CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
      </div>
      <div class="overflow-hidden">
         <h4>yxjc123.com CSS Overflow Hidden</h4>
         <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
         CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
      </div>
   </div>
</body>
</html>

CSS overflow: Clip 

以下示例演示如何通过将 CSS 溢出属性设置为 Clip 来隐藏元素的溢出内容。

<html>
<head>
<style>
   div {
      height: 130px;
      width: 250px;
      overflow: clip;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div>
      <h4>yxjc123.com CSS Overflow Clip</h4>
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
         make a type specimen book. It has survived not only five centuries, but also the leap into electronic type setting, remaining essentially unchanged.</p>
   </div>
</body>
</html>

CSS overflow: scroll和auto

以下示例确定如何将 CSS 溢出属性设置为scroll或auto。 Scroll 总是添加滚动条，而 auto 仅在需要时添加滚动条。

<html>
<head>
<style>
   .container {
      display: flex;
   }
   .overflow-scroll {
      height: 130px;
      width: 250px;
      overflow: scroll;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
      margin-right: 15px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   .overflow-auto {
      height: 130px;
      width: 250px;
      overflow: auto;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-scroll">
         <h4>yxjc123.com CSS Overflow Scroll</h4>
         <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
            CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
      </div>
      <div class="overflow-auto">
         <h4>yxjc123.com CSS Overflow Auto</h4>
         <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
            CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
      </div>
   </div>
</body>
</html>

CSS overflow: 相关属性

以下是溢出的 CSS 属性列表:

属性value
overflow-x显示水平方向溢出的内容.
overflow-y显示垂直方向溢出的内容。
overflow-anchor确定浏览器是否滚动页面以保持元素在视图中。
overflow-block确定元素内容过多时的行为方式宽以适合其容器。
overflow-inline确定内容的显示方式当它溢出元素的左右边缘时。
overflow-clip-margin确定元素的内容在被剪切之前可以溢出其框的距离。
overflow-wrap确定浏览器是否可以在不可中断的字符串中中断一行文本。