CSS overflow(溢出)用法示例代码介绍

CSS overflow控制着大内容。它指示是剪辑内容还是添加滚动条。overflow包含以下属性：

visible
hidden
scroll
auto

visible：内容不会被剪切, 并且在元素框外不可见。

例子：

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:100px;
          height:80px;
          border:1px solid;
          overflow:visible;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下：

hidden：overflow被裁剪, 其余内容不可见。

例子：

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:100px;
          height:80px;
          border:1px solid;
          overflow:hidden;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下：

scroll：溢出被裁剪, 但是添加了滚动条以查看其余内容。滚动条可以是水平或垂直的。

例子：

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:120px;
          height:100px;
          border:1px solid;
          overflow:scroll;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下：

auto：它会在需要时自动添加滚动条。

例子：

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:120px;
          height:100px;
          border:1px solid;
          overflow:auto;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下：

Overflow-x和Overflow-y：此属性指定如何更改元素的溢出。 x处理水平边缘, y处理垂直边缘。

例子：

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:120px;
          height:100px;
          border:1px solid;
          overflow-x:scroll;
          overflow-y:hidden;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下：

猜你喜欢