CSS Overflow

CSS Overflow

Thuộc tính overflow chỉ định cắt nội dung hoặc thêm thanh cuộn khi nội dung của một element quá lớn để vừa với khu vực được chỉ định.

Thuộc tính overflow có các giá trị sau:

• visible - Mặc định. Phần tràn không được cắt bớt. Nội dung hiển thị tràn ra bên ngoài element
• hidden - Phần tràn được cắt bớt và phần còn lại của nội dung sẽ không hiển thị
• scroll - Phần tràn được cắt bớt và một thanh cuộn được thêm vào để xem phần còn lại của nội dung
• auto - Tương tự như cuộn, nhưng nó chỉ thêm thanh cuộn khi cần thiết

Lưu ý: Thuộc tính overflow chỉ hoạt động đối với các element block có chiều cao được chỉ định.

overflow: visible

Theo mặc định, overflow có giá trị là visible, có nghĩa là phần tràn không bị cắt bớt và nó hiển thị ra bên ngoài element.

<pstyle="padding: 4px; background-color: coral; border: 1px solid; width: 200px; height: 80px; overflow: visible;">Bạn có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn ra ngoài element.

 

div {    width: 200px;    height: 65px;    background-color: coral;    overflow: visible;  }

 

overflow: hidden

Với giá trị hidden, phần tràn sẽ bị cắt bớt và phần còn lại của nội dung bị ẩn:

Bạn có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn ra ngoài element.

div {    overflow: hidden;  }

 

overflow: scroll

Đặt giá trị để scroll, phần tràn sẽ được cắt bớt và một thanh cuộn được thêm vào để cuộn bên trong element. Lưu ý rằng điều này sẽ thêm một thanh cuộn theo cả chiều ngang và chiều dọc (ngay cả khi bạn không cần nó):

Bạn có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn ra ngoài element.

div {    overflow: scroll;  }

 

overflow: auto

Giá trị auto tương tự như giá trị scroll, nhưng nó chỉ thêm thanh cuộn khi cần thiết:

Bạn có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn ra ngoài element.

div {    overflow: auto;  }

 

overflow-x và overflow-y

Các thuộc tính overflow-x và overflow-y chỉ định thay đổi nội dung tràn theo chiều ngang hay chiều dọc (hoặc cả hai):

overflow-x chỉ định những việc cần làm với các cạnh trái / phải của nội dung.

overflow-y chỉ định những việc cần làm với các cạnh trên / dưới của nội dung.

Bạn có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn ra ngoài element.

div {    overflow-x: hidden; /* Hide horizontal scrollbar */    overflow-y: scroll; /* Add vertical scrollbar */  }