CSS Overflow

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    244 lượt xem


CSS Overflow giúp kiểm soát element khi content bên trong elment vượt quá kích thước của element.

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-xoverflow-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 */  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.