overflow-inline
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-inline thiết lập nội dung hiển thị khi nội dung tràn qua các cạnh đầu và cuối theo chiều ngang (inline) của một hộp. Đây có thể là không hiển thị, một thanh cuộn, hoặc nội dung tràn.
Note:
Thuộc tính overflow-inline ánh xạ tới 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-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;
/* Giá trị toàn cục */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;
Thuộc tính overflow-inline được chỉ định bằng một giá trị từ khóa <overflow> duy nhất.
Giá trị
visible-
Nội dung không bị cắt xén và có thể được hiển thị ra ngoài các cạnh đầu và cuối theo chiều ngang của hộp đệm.
-
Nội dung bị cắt xén nếu cần để vừa với kích thước chiều ngang trong hộp đệm. Không có thanh cuộn nào được cung cấp.
clip-
Nội dung tràn bị cắt tại cạnh cắt tràn của phần tử, được xác định bằng thuộc tính
overflow-clip-margin. scroll-
Nội dung bị cắt xén nếu cần để vừa trong hộp đệm theo chiều ngang. Trình duyệt hiển thị thanh cuộn dù có hay không có nội dung bị cắt xén thực sự. (Đ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.
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
visible, nhưng vẫn thiết lập một ngữ cảnh định dạng khối mới. Trình duyệt máy tính để bàn cung cấp thanh cuộn nếu nội dung bị tràn.
Định nghĩa hì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 hình thức
overflow-inline =
visible |
hidden |
clip |
scroll |
auto
Ví dụ
Thiết lập hành vi tràn theo chiều ngang
HTML
<ul>
<li>
<code>overflow-inline: hidden</code> (ẩn văn bản ngoài hộp)
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: scroll</code> (luôn thêm thanh cuộn)
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: visible</code> (hiển thị văn bản ngoài hộp nếu cần)
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: auto</code> (tương đương với <code>scroll</code>
trong hầu hết các trình duyệt)
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: clip</code> (ẩn văn bản ngoài hộp vượt qua cạnh cắt
tràn)
<code>clip</code>
<div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
CSS
div {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-inline: hidden;
}
#div2 {
overflow-inline: scroll;
}
#div3 {
overflow-inline: visible;
}
#div4 {
overflow-inline: auto;
}
#div5 {
overflow-inline: clip;
overflow-clip-margin: 2em;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Overflow Module Level 3 # overflow-control |