CSS 25 – Thuộc tính overflow trong CSS

0
106

Đôi khi bạn gặp trường hợp mà phải hiển thị một lượng nội dung lớn hơn nhiều phần không gian được cấp phát cho nó. Bài này sẽ trình bày cách xử lý vấn đề này.

CSS cung cấp thuộc tính overflow để nói cho trình duyệt điều gì cần phải làm nếu nội dung hiển thị của một hộp lớn hơn nhiều phần không gian đã cấp cho hộp đó.

Thuộc tính overflow

Chúng ta sử dụng thuộc tính overflow trong CSS để điều khiển khi nội dung phần tử HTML vượt quá kích thước box. Nó có tác dụng thiết lập xem điều gì sẽ xảy khi nội dung vượt quá thành phần.

Như các phần trước, mọi phần tử trong trang đều là các box. Nếu thuộc tính height của box không được thiết lập, thì chiều cao của box tự động điều chỉnh theo nội dung phần tử.

Tuy nhiên, khi chiều rộng và chiều cao của box cố định, nếu nội dung trong box vượt quá kích thước box thì nội dung này hiện thị thế nào được điều khiển phụ thuộc bởi thuộc tính overflow

Ví dụ sau khi nôi dung vượt quá kích thước box và không dùng thuộc tính overflow

Giá trị thuộc tính Overflow

  • visible đây là mặc định, vẫn hiện thị text (bị tràn ra) khi vượt qua kích thước box
  • hidden nội dung vượt qua box sẽ bị ẩn
  • scroll hiện thị thanh cuộn để cuộn
  • auto tự động nếu cần thiết sẽ hiện thị thanh cuộn

Ví dụ sử dụng thanh cuộn

Kết luận

Như vậy chúng ta đã tìm hiểu xong thuộc tính Overflow trong CSS để giúp xử lý các vấn đề tràn dữ liệu, nội dung ra khỏi khối cố định.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây