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ả:
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).
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).
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).
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>
