Thuộc tính overflow

Thuộc tính “overflow” trong CSS được sử dụng để kiểm soát hành vi hiển thị nội dung khi nội dung bị tràn ra khỏi phần tử cha. Thuộc tính này có thể được áp dụng cho các phần tử có kích thước cố định và được áp dụng kết hợp với thuộc tính “width” và “height”.

Có các giá trị sau cho thuộc tính “overflow”:

“visible”: Giá trị mặc định. Nội dung sẽ được hiển thị tràn ra ngoài phần tử cha và vượt qua kích thước của phần tử cha.
“hidden”: Nội dung bị ẩn đi khi vượt quá kích thước của phần tử cha. Nội dung không hiển thị và sẽ bị cắt bỏ.
“scroll”: Hiển thị thanh cuộn để cho phép người dùng cuộn để xem nội dung tràn ra khỏi phần tử cha.
“auto”: Hiển thị thanh cuộn chỉ khi nội dung tràn ra khỏi phần tử cha. Nếu nội dung không tràn ra, thanh cuộn sẽ không được hiển thị.
“inherit”: Kế thừa giá trị “overflow” từ phần tử cha.
auto: Thanh cuộn sẽ chỉ hiển thị khi cần thiết.

Ví dụ:

/* Nội dung tràn ra sẽ bị che đi */
div {
  overflow: hidden;
}

/* Hiển thị thanh cuộn khi cần thiết */
p {
  overflow: auto;
}

/* Hiển thị thanh cuộn mặc dù không cần thiết */
section {
  overflow: scroll;
}

Lưu ý: thuộc tính overflow chỉ áp dụng cho các thành phần có chiều rộng và chiều cao cụ thể và chỉ áp dụng cho nội dung trong thành phần, không áp dụng cho padding và border.

Xem thêm Java JViewport

Overflow-x và overflow-y

Trong CSS, có hai thuộc tính liên quan đến việc kiểm soát tràn ra của nội dung theo chiều ngang và dọc, đó là “overflow-x” và “overflow-y”.

Thuộc tính “overflow-x”:
- Được sử dụng để kiểm soát tràn ngang của nội dung bên trong phần tử.
- Có các giá trị sau:
  - “visible”: Giá trị mặc định, cho phép nội dung tràn ra khỏi phần tử cha theo chiều ngang.
  - “hidden”: Ẩn nội dung tràn ra khỏi phần tử cha theo chiều ngang.
  - “scroll”: Hiển thị thanh cuộn để người dùng có thể cuộn nội dung tràn ra khỏi phần tử cha theo chiều ngang.
  - “auto”: Tự động hiển thị thanh cuộn chỉ khi nội dung tràn ra khỏi phần tử cha theo chiều ngang.
  - “inherit”: Kế thừa giá trị “overflow-x” từ phần tử cha.
Thuộc tính “overflow-y”:
- Được sử dụng để kiểm soát tràn dọc của nội dung bên trong phần tử.
- Có các giá trị tương tự như thuộc tính “overflow-x”:
  - “visible”, “hidden”, “scroll”, “auto”, “inherit”.

Ví dụ:

div {
  width: 200px;
  height: 100px;
  overflow-x: scroll;
  overflow-y: hidden;
}

Trong ví dụ trên, phần tử <div> có kích thước 200px x 100px. Nội dung bên trong sẽ hiển thị thanh cuộn ngang và sẽ bị ẩn đi nếu tràn ra khỏi phần tử cha theo chiều dọc.

Xem thêm Super Constructor trong ngôn ngữ Dart

Overflow và việc xử lý các phần tử trong nội dung

Khi sử dụng thuộc tính “overflow” để kiểm soát tràn ra của nội dung trong phần tử, nó có thể ảnh hưởng đến cách các phần tử bên trong phần tử cha được xử lý và hiển thị. Dưới đây là một số tác động của thuộc tính “overflow” lên việc xử lý các phần tử trong nội dung:

Overflow và việc hiển thị nội dung bên trong:
- Khi giá trị của thuộc tính “overflow” được đặt là “visible” (giá trị mặc định), các phần tử bên trong phần tử cha có thể tràn ra khỏi phần tử cha và vượt qua kích thước của nó. Điều này có thể dẫn đến việc che chắn các phần tử khác hoặc làm mất tính toàn vẹn của giao diện.
Overflow và tính toàn vẹn của giao diện:
- Khi giá trị của thuộc tính “overflow” được đặt là “hidden”, các phần tử bên trong phần tử cha sẽ bị ẩn đi khi tràn ra khỏi phần tử cha. Điều này có thể gây ra mất mát thông tin và làm mất tính toàn vẹn của giao diện. Đồng thời, phần tử bị ẩn cũng không thể truy cập hoặc tương tác được.
Overflow và định vị phần tử bên trong:
- Khi giá trị của thuộc tính “overflow” là “scroll” hoặc “auto”, các phần tử bên trong phần tử cha có thể được cuộn qua lại để xem toàn bộ nội dung. Điều này có thể ảnh hưởng đến việc định vị và căn chỉnh phần tử bên trong. Đặc biệt, khi hiển thị thanh cuộn, nó có thể chiếm diện tích và ảnh hưởng đến vị trí và khoảng cách của các phần tử khác trong phần tử cha.

Quan trọng khi sử dụng thuộc tính “overflow” là cân nhắc kỹ lưỡng về việc làm thế nào để xử lý các phần tử bên trong phần tử cha để đảm bảo tính toàn vẹn và trải nghiệm người dùng tốt nhất.

Một số ví dụ overflow trong css

Dưới đây là một số ví dụ về cách sử dụng thuộc tính overflow trong CSS:

Che đi nội dung bị tràn ra khỏi khu vực của thành phần:

div {
  overflow: hidden;
}

Hiển thị thanh cuộn khi cần thiết:

p {
  overflow: auto;
}

Hiển thị thanh cuộn mặc dù không cần thiết:

section {
  overflow: scroll;
}

Thiết lập overflow cho chiều ngang và chiều dọc riêng biệt:

div {
  overflow-x: hidden; /* Che đi nội dung bị tràn ra theo chiều ngang */
  overflow-y: hidden;
}

Xem thêm Java JScrollPane

CSS

overflow trong css

Thuộc tính overflow

Overflow-x và overflow-y

Overflow và việc xử lý các phần tử trong nội dung

Một số ví dụ overflow trong css

Trả lời Hủy