L布局 CSS - Tràn
- Trang trước CSS z-index
- Trang tiếp theo CSS Chìm
CSS overflow thuộc tính kiểm soát cách xử lý nội dung quá lớn mà không thể vào khu vực được chỉ định.
CSS Overflow
overflow Thuộc tính xác định khi nội dung của phần tử quá lớn để放入 khu vực được chỉ định là cắt bỏ nội dung hay thêm thanh cuộn.
overflow Thuộc tính có thể được thiết lập các giá trị sau:
visible- Mặc định. Nội dung chảy ra không bị cắt bỏ. Nội dung được render bên ngoài khung của phần tửhidden- Nội dung chảy ra bị cắt bỏ và phần còn lại sẽ không nhìn thấyscroll- Nội dung chảy ra bị cắt bỏ và thêm thanh cuộn để xem phần còn lạiauto- VớiscrollTương tự, nhưng chỉ thêm thanh cuộn khi cần thiết
Ghi chú:overflow Thuộc tính này chỉ áp dụng cho các phần tử khối có chiều cao được chỉ định.
Ghi chú:Trong OS X Lion (trên Mac), thanh cuộn mặc định là ẩn và chỉ hiển thị khi sử dụng (dù đã thiết lập "overflow:scroll").
overflow: visible
Mặc định, nội dung chảy ra là nhìn thấy được (visible) có nghĩa là nó sẽ không bị cắt bỏ mà được render bên ngoài khung của phần tử:
Ví dụ
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
overflow: hidden
Nếu sử dụng hidden giá trị, nội dung chảy ra sẽ bị cắt bỏ và phần còn lại sẽ bị ẩn:
Ví dụ
div {
overflow: hidden;
}
overflow: scroll
Nếu giá trị được đặt thành scrollNội dung chảy ra sẽ bị cắt bỏ và thêm thanh cuộn để cuộn trong khung. Lưu ý rằng điều này sẽ thêm thanh cuộn theo cả hướng ngang và dọc (dù bạn không cần):
Ví dụ
div {
overflow: scroll;
}
overflow: auto
auto giá trị tương tự scrollnhưng chỉ thêm thanh cuộn khi cần thiết:
Ví dụ
div {
overflow: auto;
}
overflow-x và overflow-y
overflow-x và overflow-y Thuộc tính quy định là chỉ thay đổi chảy ra của nội dung theo hướng ngang hay dọc (hoặc cùng lúc):
overflow-xXác định cách xử lý cạnh trái/phải của nội dung.overflow-yXác định cách xử lý cạnh trên/dưới của nội dung.
Ví dụ
div {
overflow-x: hidden; /* Ẩn thanh cuộn ngang */
overflow-y: scroll; /* Thêm thanh cuộn dọc */
}
Tất cả các Thuộc tính Overflow CSS
| Thuộc tính | Mô tả |
|---|---|
| overflow | Đ指定 khi nội dung chảy ra khỏi khung phần tử sẽ xảy ra điều gì. |
| overflow-x | Đ指定 cách xử lý cạnh trái/phải của nội dung khi nội dung vùng nội dung của phần tử chảy ra. |
| overflow-y | Đ指定 cách xử lý cạnh trên/dưới của nội dung khi nội dung vùng nội dung của phần tử chảy ra. |
- Trang trước CSS z-index
- Trang tiếp theo CSS Chìm
