Thuộc tính overflow trong CSS

Admin

12/09/2023

Share

Trong một số trường hợp, khi kích thước của phần tử (chiều rộng, chiều cao) bị hạn chế, nội dung bên trong phần tử có thể bị tràn ra ngoài và không thể chứa đủ trong phần tử đó. Điều này được gọi là tràn nội dung (overflow). Thuộc tính overflow trong CSS sẽ điều khiển cách thức xử lý khi nội dung bị tràn, có thể hiển thị nội dung bên ngoài phần tử, ẩn nội dung bị tràn, hoặc hiển thị thanh cuộn để có thể cuộn nội dung…

Cú pháp như dưới đây:

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

Visible.

Giá trị mặc định là khi nội dung bị tràn, nó sẽ không bị cắt xén mà vẫn được trình duyệt hiển thị ra ngoài phạm vi của khung (có thể dẫn đến việc nó chồng lê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>
    Đ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>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 một thẻ div có màu nền lightblue và đường viền màu đỏ. Thẻ div này được thiết lập với chiều rộng là 200px. Ví dụ này nhằm minh họa khi nội dung vượt quá kích thước của phần tử.

Hidden.

Nếu những nội dung vượt quá kích thước box sẽ bị loại bỏ (không hiển thị thanh cuộn scroll).

Đoạn văn này được đặt trong thẻ div có màu nền lightblue, đường viền màu đỏ và chiều rộng là 200px. Ví dụ này nhằm mô tả tình huống nội dung bị tràn (vượt quá kích thước của phần tử).

Auto.

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

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

Scroll.

Phần tử này giống như thuộc tính auto, nhưng luôn có thanh cuộn xuất hiện (ngay cả khi nội dung chưa tràn).

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

Inherit.

Thuộc tính tràn trề được thừa kế từ phần tử mà nó đang chứa.

Thuộc tính tràn ngang (overflow-x) và tràn dọc (overflow-y) trong CSS

Thuộc tính overflow có thể điều chỉnh cách xử lý khi nội dung bị tràn, bao gồm cả tràn theo chiều ngang và dọc. Nếu bạn muốn xác định cách xử lý riêng cho tràn theo chiều ngang, bạn có thể sử dụng thuộc tính overflow-x, còn với tràn theo chiều dọc, bạn có thể sử dụng thuộc tính overflow-y.

Cú pháp overflow-x:.

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

Cú pháp overflow-y: tràn đầy:.

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

Các giá trị hiển thị, ẩn, cuộn, tự động có ý nghĩa tương tự như đã được đề cập ở phần trên.

Nếu tràn theo hướng ngang, phần tràn sẽ bị che giấu, trong khi tràn theo hướng dọc sẽ hiển thị thanh cuộn.