Cascading Style Sheets

Thuộc tính overflow trong CSS

Trong nhiều trường hợp kích thước phần tử (chiều rộng, chiều cao) bị khống chế (xem thêm mô hình box phần tử trong css) trong khi đó nội dung trong phần tử lại nhiều, dẫn tới không thể chứa đủ trong box phần tử, lúc đó nội dung bị tràn (gọi là overflow). Thuộc tính overflow trong CSS sẽ điều khiển ứng sử khi nội dung bị tràn như vẫn hiện thị nội dung bên ngoài box hay ẩn đi nội dung bị tràn, hoặc cho phép xuất hiện thanh cuộn để có thể cuộn nội dung ...

Cú pháp như sau:

overflow: visible | hidden | scroll | auto | inherit;

visible

Đây là giá trị mặc định. Khi nội dung bị tràn, nó không bị cắt xén, nó vẫn được trình duyệt render (dựng, vẽ) vượt ra khỏi phạm vi box (có thể dẫn tới nó nằm đề nên các phần tử khác).

<style>
    .example1 {
        border: 1px dotted red;
        background: lightblue;
        padding: 10px;
        width: 200px;
        height: 200px;
        
        overflow: visible;
    }
    .child {
        display: inline-block;
        width: 250px;
        border: 1px solid green;
        background: yellow;
    }
    
</style>
<p>Kết quả:</p>
<div class="example1" style="margin-bottom: 60px">
    Đoạn văn này nằm trong thẻ div, thẻ div này có nền
    màu lightblue, có đường viền màu đỏ, thiết lập
    có chiểu rộng  
    <span class="child">200px</span>
    Ví dụ này để minh họa khi nội dung
    bị tràn (vượt quá kích thước phần tử).
</div>

Kết quả:

Đoạn văn này nằm trong thẻ div, thẻ div này có nền màu lightblue, có đường viền màu đỏ, thiết lập có chiểu rộng 200px Ví dụ này để minh họa khi nội dung bị tràn (vượt quá kích thước phần tử).

hidden

Cho biết những nội dung bị tràn vượt khỏi box sẽ bị cắt bỏ (không xuất hiện thanh cuộn scroll).

Đoạn văn này nằm trong thẻ div, thẻ div này có nền màu lightblue, có đường viền màu đỏ, thiết lập có chiểu rộng 200px Ví dụ này để minh họa khi nội dung bị tràn (vượt quá kích thước phần tử).

auto

Khi thiết lập overflow có giá trị auto thi ứng sử tùy thuộc vào loại trình duyệt, nhưng hầu hết sẽ xuất hiện thanh cuộn để cuộn nội dung bị tràn (nếu vượt chiều đứng xuất hiện thanh cuộn đứng, vượt chiều ngang xuất hiện thanh cuộn ngang hoặc cả hai khi vượt kích thước cả ngang cả dọc).

Đoạn văn này nằm trong thẻ div, thẻ div này có nền màu lightblue, có đường viền màu đỏ, thiết lập có chiểu rộng 200px Ví dụ này để minh họa khi nội dung bị tràn (vượt quá kích thước phần tử).

scroll

Tương tự như nhận giá trị auto, tuy nhiên phần tử luôn để dành chỗ để xuất hiện thanh scroll (kể cả khi nội dung chưa bị tràn).

Đoạn văn này nằm trong thẻ div.

inherit

Thuộc tính overflow kế thừa từ phần tử chứa nó.

Thuộc tính overflow-x và overflow-y trong CSS

Thuộc tính overflow giúp thay đổi ứng sử khi nội dung bị tràn, nó thiết lập đồng thời cho cả trường hợp tràn theo chiều ngang và dọc. Trong trường hợp bạn muốn thiết lập riêng rẽ ứng sử ra sao khi tràn theo chiều trang thì dùng thuộc tính overflow-x còn theo chiều đứng là overflow-y

Cú pháp overflow-x:

overflow-x: visible | hidden | scroll | auto | inherit;

Cú pháp overflow-y:

overflow-y: visible | hidden | scroll | auto | inherit;

Các giá trị visible, hidden, scroll, auto ý nghĩa của nó như phần trên.

Ví dụ, thiết lập nếu tràn theo chiều x thì bị ẩn đi phần tràn - còn phần tràn theo chiều y sẽ xuất hiện thanh cuộn.

<style>
    .example2 {
        height: 200px;
        border: 1px solid red;

        overflow-x: hidden;
        overflow-y: auto;
    }
</style>
<div class="example2">
    <img src="https://cdn.pixabay.com/photo/2022/10/05/20/43/hyacinth-macaw-7501470_1280.jpg" alt="">
</div>

Đăng ký nhận bài viết mới