Bài 26: Cách sử dụng Overflow trong css

Cách sử dụng Overflow trong css

Overflow là một thuộc tính trong CSS được sử dụng để kiểm soát phần nội dung của một phần tử khi nó vượt ra khỏi khu vực của nó. Nó có thể được sử dụng để xác định cách xử lý nội dung khi nó vượt quá kích thước của phần tử đó.

Có 4 giá trị chính được sử dụng cho thuộc tính overflow:

1. visible (giá trị mặc định): Nội dung của phần tử sẽ vượt ra khỏi khu vực của phần tử.

2. hidden: Nội dung của phần tử sẽ bị ẩn đi và không hiển thị ra ngoài khu vực của phần tử.

3. scroll: Một thanh cuộn sẽ được hiển thị để cho phép người dùng cuộn nội dung của phần tử.

4. auto: Nếu nội dung của phần tử vượt quá kích thước của phần tử, một thanh cuộn sẽ được hiển thị để người dùng cuộn nội dung của phần tử. Nếu nội dung không vượt quá kích thước của phần tử, không có thanh cuộn nào được hiển thị.

Ví dụ, để ẩn bất kỳ nội dung nào vượt quá kích thước của phần tử, bạn có thể sử dụng thuộc tính overflow với giá trị là "hidden":

div {
  overflow: hidden;
}

Bạn cũng có thể sử dụng thuộc tính overflow để tạo thanh cuộn ngang hoặc dọc. Ví dụ, để tạo thanh cuộn dọc, bạn có thể sử dụng thuộc tính overflow với giá trị là "auto" hoặc "scroll":

div {
  overflow-y: auto; /* Tạo thanh cuộn dọc khi cần thiết */
}

Tương tự, để tạo thanh cuộn ngang, bạn có thể sử dụng thuộc tính overflow-x:

div {
  overflow-x: auto; /* Tạo thanh cuộn ngang khi cần thiết */
}