overflow
Các tiện ích để kiểm soát cách một phần tử xử lý nội dung quá lớn so với container.
| Class | Styles |
|---|---|
overflow-auto | overflow: auto; |
overflow-hidden | overflow: hidden; |
overflow-clip | overflow: clip; |
overflow-visible | overflow: visible; |
overflow-scroll | overflow: scroll; |
overflow-x-auto | overflow-x: auto; |
overflow-y-auto | overflow-y: auto; |
overflow-x-hidden | overflow-x: hidden; |
overflow-y-hidden | overflow-y: hidden; |
overflow-x-clip | overflow-x: clip; |
overflow-y-clip | overflow-y: clip; |
overflow-x-visible | overflow-x: visible; |
overflow-y-visible | overflow-y: visible; |
overflow-x-scroll | overflow-x: scroll; |
overflow-y-scroll | overflow-y: scroll; |
Ví dụ
Hiển thị nội dung bị tràn
Sử dụng tiện ích overflow-visible để ngăn nội dung bên trong một phần tử bị cắt:
<div class="overflow-visible ..."> <!-- ... --></div>Lưu ý rằng bất kỳ nội dung nào tràn ra ngoài giới hạn của phần tử sau đó sẽ hiển thị.
Ẩn nội dung bị tràn
Sử dụng tiện ích overflow-hidden để cắt bất kỳ nội dung nào bên trong một phần tử tràn ra ngoài giới hạn của phần tử đó:
<div class="overflow-hidden ..."> <!-- ... --></div>Cuộn nếu cần thiết
Sử dụng tiện ích overflow-auto để thêm thanh cuộn vào một phần tử trong trường hợp nội dung của nó tràn ra ngoài giới hạn của phần tử đó:
Scroll vertically
<div class="overflow-auto ..."> <!-- ... --></div>Không giống như overflow-scroll, luôn hiển thị thanh cuộn, tiện ích này sẽ chỉ hiển thị chúng nếu việc cuộn là cần thiết.
Cuộn ngang nếu cần thiết
Sử dụng tiện ích overflow-x-auto để cho phép cuộn ngang nếu cần thiết:
Scroll horizontally
Andrew
Emily
Whitney
David
Kristin
Sarah<div class="overflow-x-auto ..."> <!-- ... --></div>Cuộn dọc nếu cần thiết
Sử dụng tiện ích overflow-y-auto để cho phép cuộn dọc nếu cần thiết:
Scroll vertically
<div class="h-32 overflow-y-auto ..."> <!-- ... --></div>Luôn cuộn ngang
Sử dụng tiện ích overflow-x-scroll để cho phép cuộn ngang và luôn hiển thị thanh cuộn trừ khi thanh cuộn luôn hiển thị bị vô hiệu hóa bởi hệ điều hành:
Scroll horizontally
AndrewEmilyWhitneyDavidKristinSarah<div class="overflow-x-scroll ..."> <!-- ... --></div>Luôn cuộn dọc
Sử dụng tiện ích overflow-y-scroll để cho phép cuộn dọc và luôn hiển thị thanh cuộn trừ khi thanh cuộn luôn hiển thị bị vô hiệu hóa bởi hệ điều hành:
Scroll vertically
<div class="overflow-y-scroll ..."> <!-- ... --></div>Cuộn theo mọi hướng
Sử dụng tiện ích overflow-scroll để thêm thanh cuộn vào một phần tử:
Scroll vertically and horizontally
<div class="overflow-scroll ..."> <!-- ... --></div>Không giống như overflow-auto, chỉ hiển thị thanh cuộn nếu chúng cần thiết, tiện ích này luôn hiển thị chúng. Lưu ý rằng một số hệ điều hành (như macOS) ẩn các thanh cuộn không cần thiết bất kể cài đặt này.
Thiết kế phản hồi
Prefix an overflow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.