overflow

优质

小牛编辑

119浏览

2023-12-01

描述 (Description)

overflow属性确定应如何处理溢出其元素内容区域的内容。

可能的值 (Possible Values)

visible - 应显示溢出的内容。
hidden - 不应显示溢出内容。
scroll - 不应显示溢出内容，但用户代理应提供一些访问隐藏内容的方法（例如，一组滚动条）。
auto - 此值导致的行为取决于浏览器。

适用于 (Applies to)

所有HTML元素。

DOM语法 (DOM Syntax)

object.style.overflow = "scroll";

例子 (Example)

这是一个例子 -

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>
   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      <p>Example of auto value:</p>
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

这将产生以下结果 -