overflow-x
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính overflow-x trong CSS xác định nội dung hiển thị như thế nào khi nội dung tràn ra ngoài cạnh trái và phải của một phần tử cấp khối. Thuộc tính này cũng có thể được đặt bằng thuộc tính viết tắt overflow.
Try it
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
<section class="default-example" id="default-example">
<div id="example-element">
The value of Pi is 3.1415926535897932384626433832795029. The value of e is
2.7182818284590452353602874713526625.
</div>
</section>
#example-element {
width: 15em;
height: 9em;
border: medium dotted;
padding: 0.75em;
text-align: left;
}
Cú pháp
/* Giá trị từ khóa */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
/* Giá trị toàn cục */
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: revert-layer;
overflow-x: unset;
Nếu overflow-y là hidden, scroll, hoặc auto, và overflow-x là visible (mặc định), giá trị sẽ được tính ngầm là auto.
Các giá trị
visible-
Nội dung tràn không bị cắt và có thể hiển thị bên ngoài hộp padding.
-
Nội dung tràn bị cắt nếu cần để vừa theo chiều ngang. Không có thanh cuộn nào.
clip-
Nội dung tràn bị cắt tại cạnh clip được xác định bởi
overflow-clip-margin. Cấm tất cả các thao tác cuộn. scroll-
Nội dung tràn bị cắt. Trình duyệt luôn hiển thị thanh cuộn ngang.
auto-
Nội dung tràn bị cắt. Trình duyệt chỉ hiển thị thanh cuộn khi nội dung thực sự tràn.
Định nghĩa hình thức
| Initial value | visible |
|---|---|
| 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-x =
visible |
hidden |
clip |
scroll |
auto
Ví dụ
HTML
<ul>
<li>
<code>overflow-x:hidden</code> — ẩn văn bản bên ngoài hộp
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:scroll</code> — luôn thêm thanh cuộn
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:visible</code> — hiển thị văn bản bên ngoài nếu cần
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:auto</code> — tương đương scroll trên hầu hết trình duyệt
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
CSS
#div1,
#div2,
#div3,
#div4 {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-x: hidden;
}
#div2 {
overflow-x: scroll;
}
#div3 {
overflow-x: visible;
}
#div4 {
overflow-x: auto;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Overflow Module Level 3 # overflow-properties |
Tương thích trình duyệt
Xem thêm
clip,display,text-overflow,white-space- CSS overflow module