Overflow trong CSS là thuộc tính được sử dụng để kiểm soát cách trình duyệt xử lý nội dung khi nó vượt quá giới hạn của phần tử chứa. Mỗi phần tử trong CSS có thể có một không gian kích thước cố định hoặc động, nhưng đôi khi nội dung bên trong nó có thể lớn hơn không gian có sẵn. Khi đó, thuộc tính overflow quyết định cách nội dung dư thừa được hiển thị hoặc bị cắt bớt.
selector {
overflow: value;
}Các giá trị phổ biến cho thuộc tính overflow bao gồm: visible, hidden, scroll, và auto.
overflow: visiblevisible. Điều này có nghĩa là nếu nội dung vượt quá giới hạn của phần tử chứa, nó sẽ vẫn hiển thị đầy đủ ra ngoài mà không bị cắt.Ví dụ:
div {
width: 200px;
height: 100px;
overflow: visible;
border: 1px solid black;
}<div>
Đây là nội dung rất dài mà vượt quá không gian của phần tử chứa này.
</div>Trong ví dụ này, nội dung vượt quá vẫn sẽ hiển thị ra ngoài giới hạn của div.
overflow: hiddenhidden, nội dung vượt quá giới hạn của phần tử sẽ bị ẩn đi và không được hiển thị ra bên ngoài.Ví dụ:
div {
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid black;
}Trong trường hợp này, nếu nội dung dài hơn chiều cao và chiều rộng của div, nó sẽ bị cắt bỏ và không hiển thị ra ngoài phần tử.
overflow: scrollscroll sẽ luôn hiển thị thanh cuộn (cả ngang và dọc) dù nội dung có vượt quá hay không. Người dùng có thể kéo để xem phần nội dung ẩn.Ví dụ:
div {
width: 200px;
height: 100px;
overflow: scroll;
border: 1px solid black;
}Thanh cuộn sẽ luôn xuất hiện cho dù nội dung có vượt quá kích thước của div hay không.
overflow: autoauto sẽ tự động thêm thanh cuộn chỉ khi nội dung vượt quá kích thước của phần tử chứa. Nếu không có nội dung vượt quá, thanh cuộn sẽ không xuất hiện.Ví dụ:
div {
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid black;
}Trong ví dụ này, thanh cuộn sẽ chỉ xuất hiện khi nội dung vượt quá không gian của div.
overflow-x và overflow-yNgoài thuộc tính overflow, CSS còn cung cấp các thuộc tính cụ thể cho cuộn ngang và dọc: overflow-x và overflow-y. Điều này cho phép kiểm soát riêng biệt cuộn theo chiều ngang và chiều dọc.
overflow-x: Điều khiển cuộn theo chiều ngang.overflow-y: Điều khiển cuộn theo chiều dọc.Ví dụ:
div {
width: 200px;
height: 100px;
overflow-x: hidden; /* Không cho phép cuộn ngang */
overflow-y: scroll; /* Cho phép cuộn dọc */
border: 1px solid black;
}Trong ví dụ này, nội dung chỉ có thể cuộn theo chiều dọc, còn chiều ngang sẽ bị ẩn.
overflowoverflow: auto hoặc scroll.overflow trong CSS là công cụ quan trọng để quản lý việc hiển thị nội dung khi không gian của phần tử chứa bị giới hạn. Tùy thuộc vào yêu cầu thiết kế và trải nghiệm người dùng, bạn có thể sử dụng các giá trị khác nhau của thuộc tính overflow như visible, hidden, scroll, hoặc auto để kiểm soát nội dung tràn.
