Thuộc tính overflow

Điểm 4.6/5 dựa vào 87 đánh giá

Theo định nghĩa của W3Schools.com, "thuộc tính overflow qui định rằng điều gì sẽ xảy ra nếu nội dung tràn khỏi khối của thành phần". Nói một cách đơn giản là tạo ra thanh trượt hoặc không thanh trượt khi bạn muốn một nội dung quá dài sẽ được gói gọn lại trong một khung nhỏ với chiều cao và độ rộng nhất định nhưng người dùng vẫn có thể xem được tất cả nội dung bên trong đó. Đây là thuộc tính khá hữu ixhs cho việc trình bày những nội dung quá dài trên trang blog/web của bạn. Dưới đây là một số giá trị của Overflow.

Hình ảnh minh họa

Thuộc tínhGiá trịVí dụMô tả
overflowvisibleoverflow: visible;Khi chiều cao của box không đủ chứa text, thì text vẫn hiển thị tràn qua box, đây là mặc định.
hiddenoverflow: hidden;Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được dấu đi.
scrolloverflow: scroll;Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được dấu đi và xuất hiện thanh scroll, khi cuộn sẽ hiển thị text.
Khi sử dụng thành phần này sẽ xuất hiện cả thanh scroll ngang và dọc.
autooverflow: auto;Khi chiều cao của box không đủ chứa text, thì thanh scroll sẽ tự động hiển thị.
Khi sử dụng thành phần này sẽ xuất hiện thanh scroll dọc.
inheritoverflow: inherit;Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ngoài ra bạn còn có thể tùy chỉnh thanh trượt ngang và dọc riêng lẽ bằng cách thêm x hoặc y vào overflow như sau:

- Overflow-x: Tùy chỉnh thanh ngang.
- Overflow-y: Tùy chỉnh thanh dọc.
Tổng hợp internet

Chuyên mục:

Không có nhận xét nào