Thuộc tính overflow dùng xử lý trường hợp nội dung bị “tràn”
ra khỏi 01 phần tử.
Có 02 cách xử lý: thêm scrollbar hoặc ẩn phần nội dung bị tràn.
Thuộc tính overflow có các giá trị sau:
·
visible
visible
·
hidden
hidden
·
scroll
scroll
·
auto
auto
Ghi chú: thuộc tính overflow chỉ có tác dụng với đối tượng dạng block và có chiều cao phần tử( height) được thiết lập.
Trong máy MAC mặc định sẽ không có scrollbar khi nội dung bị “tràn”, chỉ khi ta thiết lập overflow:scroll
Tóm Tắt
1. overflow:visible
Khi nội dung của phần tử vượt quá kích thước của nó sẽ tự động tràn ra ngoài.
Ví dụ:
div
{
width
:
200px
;
height
:
50px
;
background-color
:
#eee
;
overflow
:
visible
;
và giá trị HTML trong phần body
DÊ CON VÀ CÁO
Một con dê con được người chăn dê để lại trên mái chuồng dê để tránh cho nó khỏi bị thú dữ ăn thịt.
Dê con đang nhảy ra gần cạnh mái chuồng, bỗng nó nhìn thấy một con cáo và dê bắt đầu chế giễu cáo, nheo mũi và thỏa sức lăng mạ cáo.
mái chuồng
sắp xụp
kia.”</p>
Cáo nói,:”Ờ tao nghe mày chửi đây, điều mày nói chẳng hề hấn gì với tao đâu, nhưng coi chừngmái chuồngsắp xụp kia.”
Đừng bao giờ nói bất cứ điều gì không nên nói.
2. overflow:hidden
Thuộc tính này sẽ cắt phần nội dung bị “tràn” của phần tử.
Ví dụ: ta lấy lại ví dụ ở phần 1 nhưng sửa overflow:hidden
div
{
width
:
200px
;
height
:
50px
;
background-color
:
#eee
;
overflow
:
hidden
;
}
3. overflow:scroll
Thuộc tính này sẽ làm xuất hiện 02 thanh cuộn ngang và dọc xung quanh phần tử nếu nội dung bị “tràn”.
Ví dụ: ta sửa overflow:scroll trong ví dụ
div
{
width
:
200px
;
height
:
50px
;
background-color
:
#eee
;
overflow
:
scroll
;
}
4. overflow:auto
Thuộc tính auto sẽ thêm thanh scrollbar ngang hay dọc tương ứng nội dung bị “tràn”.
Ví dụ:ta sửa overflow:auto
div
{
width
:
200px
;
height
:
50px
;
background-color
:
#eee
;
overflow
:
auto
;
}
5. overflow-x và overflow-y
Ta có thể xử lý riêng phần nội dung bị tràn theo chiều ngang( overflow-x) hay chiều dọc (overflow-y) riêng biệt.
Ví dụ:
div
{
overflow-x
:
hidden
;
/* Hide horizontal
scrollbar */
overflow-y
:
scroll
;
/* Add vertical scrollbar
*/
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
Tác giả: #drM
Nguồn: Sưu Tầm
Nguồn: