Khóa học CSS - Bài 19 - Thuộc tính overflow

 Quay về MỤC LỤC TỰ HỌC CSS

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

·         hidden

·         scroll

·         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

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

<div>

<p>DÊ CON VÀ CÁO</p>

<p>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.</p>

<p>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.</p>

<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ừng  mái chuồng  sắp xụp kia."</p>

<p>Đừng bao giờ nói bất cứ điều gì không nên nói.</p>

</div>

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:

 Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm