overflow-block
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2023.
Tính năng media overflow-block trong CSS có thể được dùng để kiểm tra cách thiết bị đầu ra xử lý nội dung tràn ra ngoài khối chứa ban đầu theo trục khối.
Note:
Thuộc tính overflow-block không xác định xem có tràn hay không; mà nó cho biết cách thiết bị xử lý sự tràn đó. Thông thường, trên màn hình trong hầu hết các trình duyệt, hành vi sẽ là "scroll": khi nội dung vượt quá không gian dọc có sẵn, thiết bị cho phép bạn cuộn để truy cập nội dung bị tràn.
Cú pháp
Tính năng overflow-block được xác định bởi một trong các giá trị từ khóa dưới đây.
none-
Nội dung tràn ra trục khối sẽ không được hiển thị.
scroll-
Nội dung tràn ra trục khối có thể xem được bằng cách cuộn đến đó.
optional-paged-
Nội dung tràn ra trục khối có thể xem được bằng cách cuộn, nhưng ngắt trang có thể được kích hoạt thủ công (chẳng hạn qua
break-inside, v.v.) để làm cho nội dung tiếp theo hiển thị trên trang tiếp theo. paged-
Nội dung được chia thành các trang rời; nội dung tràn một trang theo trục khối sẽ được hiển thị trên trang tiếp theo.
Ví dụ
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
sed eget ex.
</p>
CSS
@media (overflow-block: scroll) {
p {
color: red;
}
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| Media Queries Level 4 # mf-overflow-block |