overflow-block
Baseline
2025
*
Newly available
Since September 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Thuộc tính CSS overflow-block xác định nội dung được hiển thị như thế nào khi tràn ra ngoài các cạnh đầu và cuối khối của hộp. Có thể là không hiển thị gì, thanh cuộn, hoặc nội dung tràn ra ngoài.
Note:
Thuộc tính overflow-block ánh xạ đến overflow-y hoặc overflow-x tùy thuộc vào chế độ viết của tài liệu.
Cú pháp
/* Giá trị từ khóa */
overflow-block: visible;
overflow-block: hidden;
overflow-block: clip;
overflow-block: scroll;
overflow-block: auto;
/* Giá trị toàn cục */
overflow-block: inherit;
overflow-block: initial;
overflow-block: revert;
overflow-block: revert-layer;
overflow-block: unset;
Thuộc tính overflow-block được chỉ định là một giá trị từ khóa <overflow> duy nhất:
Giá trị
visible-
Nội dung không bị cắt và có thể hiển thị bên ngoài các cạnh đầu và cuối khối của hộp đệm.
-
Nội dung được cắt nếu cần để vừa với kích thước khối trong hộp đệm. Không có thanh cuộn nào được cung cấp.
clip-
Nội dung tràn ra ngoài bị cắt tại cạnh clip tràn của phần tử được xác định bằng thuộc tính
overflow-clip-margin. scroll-
Nội dung được cắt nếu cần để vừa với kích thước khối trong hộp đệm. Trình duyệt hiển thị thanh cuộn dù nội dung có thực sự bị cắt hay không. (Điều này ngăn thanh cuộn xuất hiện hoặc biến mất khi nội dung thay đổi.) Máy in vẫn có thể in nội dung tràn ra ngoài.
auto-
Phụ thuộc vào tác nhân người dùng. Nếu nội dung vừa trong hộp đệm, nó trông giống như
visible, nhưng vẫn tạo ra ngữ cảnh định dạng khối mới.
Định nghĩa chính thức
| Initial value | auto |
|---|---|
| Applies to | Block-containers, flex containers, and grid containers |
| Inherited | no |
| Computed value | as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip |
| Animation type | discrete |
Cú pháp chính thức
overflow-block =
visible |
hidden |
clip |
scroll |
auto
Ví dụ
HTML
<ul>
<li>
<code>overflow-block: hidden</code> (hides the text outside the box)
<div id="hidden">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-block: scroll</code> (always adds a scrollbar)
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-block: clip</code> (hides the text outside the box beyond the
overflow clip edge)
<div id="clip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-block: visible</code> (displays the text outside the box if
needed)
<div id="visible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-block: auto</code> (on most browsers, equivalent to
<code>scroll</code>)
<div id="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
CSS
div {
border: 1px solid black;
width: 250px;
height: 100px;
margin-bottom: 120px;
}
#hidden {
overflow-block: hidden;
}
#scroll {
overflow-block: scroll;
}
#clip {
overflow-block: clip;
}
#visible {
overflow-block: visible;
}
#auto {
overflow-block: auto;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Overflow Module Level 3 # overflow-control |