CSS3 overflow-style 属性
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
时需要注意浏览器兼容性。