---

CSS3 overflow-style 属性

overflow-style属性是用于设置溢出元素的边缘如何呈现的CSS3属性。它可以控制HTML元素在内容溢出时如何呈现或修剪溢出的内容。该属性目前只有Chrome浏览器支持。

语法

overflow-style: auto|none|scroll|marquee-line|marquee-block|initial|inherit;

值

• auto：默认值，使浏览器使用默认的滚动机制。
• none：使浏览器不显示任何滚动条。
• scroll：使浏览器显示垂直和水平滚动条，无论是否需要滚动。
• marquee-line：使内容在一条连续的水平线上滚动。
• marquee-block：使内容在连续的垂直滚动块中滚动。
• initial：设置属性为它的默认值。
• inherit：从父元素继承属性值。

实例

auto 值

div {
  height: 100px;
  width: 200px;
  overflow-style: auto;
}

在这个例子中，当内容溢出元素时，浏览器会使用默认的滚动机制来显示滚动条。在这种情况下，该元素将显示垂直和水平滚动条。

none 值

div {
  height: 100px;
  width: 200px;
  overflow-style: none;
}

这个例子中，当内容溢出元素时，浏览器将不显示任何滚动条。 因此，您将无法滚动超出元素框的内容。

scroll 值

div {
  height: 100px;
  width: 200px;
  overflow-style: scroll;
}

在这个例子中，当内容溢出元素时，浏览器将显示垂直和水平滚动条，无论是否需要滚动。 因此，您将始终看到滚动条。

marquee-line 值

div {
  height: 100px;
  width: 200px;
  overflow-style: marquee-line;
  white-space: nowrap;
  overflow: hidden;
}

在这个例子中，元素的内容将在一个连续的水平线上滚动。您需要添加white-space属性并将其设置为nowrap，这样内容就不会被换行。同时，您还需要添加overflow属性并将其设置为hidden，这将隐藏溢出的内容。

marquee-block 值

div {
  height: 100px;
  width: 200px;
  overflow-style: marquee-block;
  overflow: hidden;
}

在这个例子中，元素的内容将在一个连续的垂直滚动块中滚动。您需要添加overflow属性并将其设置为hidden，这将隐藏溢出的内容。

浏览器兼容性

该属性目前只有Chrome浏览器支持，其他浏览器不支持该属性。因此，在使用overflow-style时需要注意浏览器兼容性。