Thuộc tính overflow CSS

Định nghĩa và cách sử dụng

overflow Thuộc tính quy định hành động khi nội dung vượt ra ngoài khung phần tử.

Giải thích

Thuộc tính này xác định cách xử lý nội dung của phần tử overflow. Nếu giá trị là scroll, người đại diện người dùng sẽ cung cấp cơ chế cuộn, bất kể có cần thiết hay không. Do đó, có thể xuất hiện thanh cuộn ngay cả khi tất cả nội dung có thể chứa trong khung phần tử.

Xem thêm:

Hướng dẫn CSS:Định vị CSS

Hướng dẫn tham khảo HTML DOM:Thuộc tính overflow

Ví dụ

Thiết lập thuộc tính overflow:

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

Thử ngay

Ngôn ngữ CSS

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

Giá trị thuộc tính

Giá trị Mô tả
visible Giá trị mặc định. Nội dung sẽ không bị cắt bỏ và sẽ hiển thị bên ngoài khung phần tử.
hidden Nội dung sẽ bị cắt bỏ và nội dung còn lại là không thể nhìn thấy.
scroll Nội dung sẽ bị cắt bỏ, nhưng trình duyệt sẽ hiển thị thanh cuộn để xem nội dung còn lại.
auto Nếu nội dung bị cắt bỏ, trình duyệt sẽ hiển thị thanh cuộn để xem nội dung còn lại.
inherit Định nghĩa rằng overflow thuộc tính nên kế thừa giá trị từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: visible
Kế thừa: no
Phiên bản: CSS2
Ngôn ngữ JavaScript: object.style.overflow="scroll"

Các ví dụ khác

Cách sử dụng thanh cuộn để hiển thị nội dung overflow trong phần tử
Ví dụ này minh họa cách thiết lập thuộc tính overflow để quy định hành động tương ứng khi nội dung phần tử quá lớn và vượt ra ngoài định vùng.
Cách ẩn nội dung overflow trong phần tử overflow
Ví dụ này minh họa cách thiết lập thuộc tính overflow để ẩn nội dung khi nội dung trong phần tử quá lớn mà không thể适应当 định vùng.
Cách thiết lập trình duyệt tự động xử lý overflow
Ví dụ này minh họa cách thiết lập trình duyệt tự động xử lý overflow.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0