Style overflow 属性

Style 对象参考手册 Style 对象

定义和用法

overflow 属性设置或返回如何处理呈现在元素框外面的内容。

语法

设置 overflow 属性：

Object.style.overflow = "visible|hidden|scroll|auto|inherit"

返回 overflow 属性：

Object.style.overflow

值 描述
visible 默认。内容不会被修剪，会显示在元素框之外。
hidden 内容会被修剪，元素框外面的内容不会被显示，浏览器不会显示滚动条。
scroll 浏览器会显示滚动条，如果需要内容会被修剪。
auto 内容会被修剪，如果需要则显示滚动条。
inherit overflow 属性的值从父元素继承。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要浏览器都支持 overflow 属性。

注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有规定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。

提示和注释

提示：如果您想要隐藏整个文档的滚动条，请在 body 或 html 元素上使用 overflow 属性。

实例

使用 overflow 属性来隐藏溢出的内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style type="text/css">
    div {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
  </style>
  <script>
    function displayResult() {
      document.getElementById("div1").style.overflow = "hidden";
    }
  </script>
</head>
<body>

  <div id="div1">
    这是一些文本。这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。这是一些文本。
  </div>
  <br>
  <input type="button" onclick="displayResult()" value="隐藏溢出">

</body>
</html>

尝试一下 »

Style 对象参考手册 Style 对象