CSS Overflow

21/05/2019

Bài sau » « Bài trước

Thuộc tính CSS overflow xác định xem có nên cắt nội dung hoặc thêm thanh scroll bar khi nội dung quá lớn so với phần tử chứa nó.

Thuộc tính CSS overflow có 4 giá trị sau đây:

  • visible : Thuộc tính mặc định. Phần nội dung không bị cắt, nó tràn ra ngoài phần tử chứa nó.
  • hidden : Nội dung sẽ bị cắt bớt, phần tràn ra ngoài được ẩn đi.
  • scroll : Nội dung sẽ bị cắt bớt, có thanh scroll bar được thêm vào để xem cần tràn ra.
  • auto : Tương tự như scroll, nhưng nó chỉ thêm thanh scroll bar khi nội dung bị tràn ra.

Chú ý: Thuộc tính overflow chỉ hoạt động đối với thẻ HTML có display block và có giá trị chiều cao cụ thể.

Chú ý: Trên máy Mac, Thanh scrollbar mặc định được ẩn và chỉ hiển thị khi được sử dụng (kể cả khi dùng overflow: scroll ).

Overflow visible

Theo mặc định, Nội dung tràn ra được visible, có nghĩa là nó không bị cắt và nó hiển thị bên ngoài chiều cao của phần tử HTML. Xem ví dụ sau:

Đoạn văn bản có nhiều dòng và nhiều chữ. Nhưng thẻ HTML chứa nó chỉ cao có 80px và width 200px, nên không chứa hết nội dung này. Và kết quả là phần nội dung bị tràn ra ngoài.

p { width: 200px; height: 80px; background-color: #eee; overflow: visible; }

Overflow hidden

Với giá trị là hidden thì nội dung bị cắt và phần tràn ra ngoài bị ẩn đi.

Đoạn văn bản có nhiều dòng và nhiều chữ. Nhưng thẻ HTML chứa nó chỉ cao có 80px và width 200px, nên không chứa hết nội dung này. Và kết quả là phần nội dung bị tràn ra ngoài.

p { width: 200px; height: 80px; background-color: #eee; overflow: hidden; }

Overflow scroll

Với giá trị là scroll thì nội dung bị cắt và thanh scroll bar được thêm vào để xem phần nội dung tràn ra ngoài. Lưu ý , Thanh scroll bar được thêm cả chiều ngang và chiều dọc .

Đoạn văn bản có nhiều dòng và nhiều chữ. Nhưng thẻ HTML chứa nó chỉ cao có 80px và width 200px, nên không chứa hết nội dung này. Và kết quả là phần nội dung bị tràn ra ngoài. Với giá trị scroll thì ta có thể xem phần tràn ra ngoài.

p { width: 200px; height: 80px; background-color: #eee; overflow: scroll; }

Overflow auto

Với giá trị là auto thì chức năng cũng giống như giá trị scroll, nhưng chỉ khác là thanh scroll bar chỉ được thêm vào khi nội dung tràn ra ngoài.

Đoạn văn bản có nhiều dòng và nhiều chữ. Nhưng thẻ HTML chứa nó chỉ cao có 80px và width 200px, nên không chứa hết nội dung này. Và kết quả là phần nội dung bị tràn ra ngoài. Với giá trị auto thì ta có thể xem phần tràn ra ngoài.

p { width: 200px; height: 80px; background-color: #eee; overflow: auto; }

Đoạn văn bản có ít chữ, không có thanh scroll bar.

Overflow-x và Overflow-y

Thuộc tính overflow-xoverflow-y xác định phần tử tràn nội dung theo chiều ngang hoặc chiều dọc.

overflow-x : Cho phép phần tử tràn nội dung theo chiều ngang (từ trái qua phải).

overflow-y : Cho phép phần tử tràn nội dung theo chiều dọc (từ trên xuống dưới).

Đoạn văn bản có nhiều dòng và nhiều chữ. Nhưng thẻ HTML chứa nó chỉ cao có 80px và width 200px, nên không chứa hết nội dung này. Và kết quả là phần nội dung bị tràn ra ngoài. Với giá trị scroll thì ta có thể xem phần tràn ra ngoài.

p { width: 200px; height: 80px; background-color: #eee; overflow-x: hidden; overflow-y: scroll; }

Bài hướng dẫn về thuộc tính CSS Overflow đến đây là kết thúc. Chúc các bạn thực hành thành công.

Bài sau » « Bài trước
Back to top