CSS overflow-block 属性决定了当元素的内容超过其框的左右边界时的行为方式。
overflow-block 属性仅在 Firefox 浏览器上受支持。
可能的值
- visible-允许内容溢出元素的框。
- hidden -溢出内容是隐藏的。
- clip -clip overflow 值用于剪裁溢出的内容并使其不可见。
- scroll −通过添加滚动条，可以使元素可滚动。
- auto −滚动条将添加到元素中，以便用户可以查看其溢出内容。
适用于
所有 HTML 元素。
DOM 语法
object.style.overflowBlock = "visible|hidden|clip|scroll|auto";
属性 overflow-block 仅在 Firefox 浏览器上受支持。因此，所有示例仅适用于Firefox浏览器。
CSS overflow-block - 具有可见和隐藏的值
overflow-block 属性控制元素的内容是否可以溢出其边界。可见值允许内容溢出，而隐藏值则隐藏任何溢出的内容。
<html>
<head>
<style>
.container {
display:flex;
}
div.overflow-block-visible {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-block: visible;
margin-right: 100px;
}
h4 {
text-align: center;
color: #D90F0F;
}
div.overflow-block-hidden {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-block: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-block-visible">
<h4>Tutorialspoint CSS Overflow-block Visible</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
<div class="overflow-block-hidden">
<h4>Tutorialspoint CSS Overflow-block Hidden</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
</div>
</body>
</html>
CSS overflow-block - clip 值
overflow-block： clip 属性隐藏元素的任何溢出内容。不会添加任何滚动条。
<html>
<head>
<style>
div.overflow-block-clip {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-block: clip;
}
h4 {
text-align: center;
color: #D90F0F;
}
</style>
</head>
<body>
<div class="overflow-block-clip">
<h4<Tutorialspoint CSS Overflow-block Clip</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
</body>
</html>
CSS overflow-block - 具有滚动和自动值
当 overflow-block 属性设置为 scroll 和 auto 时。滚动条始终添加滚动条，而自动仅在需要时添加滚动条。
<html>
<head>
<style>
.container {
display:flex;
}
div.overflow-block-scroll {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-block: scroll;
margin-right: 100px;
}
h4 {
text-align: center;
color: #D90F0F;
}
div.overflow-block-auto {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-block: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-block-scroll">
<h4>Tutorialspoint CSS Overflow-block Scroll</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
<div class="overflow-block-auto">
<h4>Tutorialspoint CSS Overflow-block Auto</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
</div>
</body>
</html>
