Bài viết này sẽ minh họa:
- Cách sử dụng “overflow-auto” trong Tailwind?
- Làm cách nào để sử dụng 'overflow-scroll' trong Tailwind?
Cách sử dụng “overflow-auto” trong Tailwind?
Các ' tràn-tự động ” tự động thêm thanh cuộn khi tràn nội dung. Nó không hiển thị thanh cuộn nếu nội dung không tràn. Để sử dụng “overflow-auto” trong Tailwind, hãy tạo một chương trình HTML và thêm “ tràn-tự động ” lớp tiện ích thành phần tử mong muốn trong chương trình HTML.
cú pháp
< yếu tố lớp học = 'tràn-tự động ...' > ... yếu tố >
Ví dụ
Trong ví dụ này, chúng ta sẽ áp dụng 'tràn-tự động' tiện ích cho
thùng đựng hàng: < thân hình >
< div lớp học = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS cung cấp nhiều tiện ích 'tràn' khác nhau, chẳng hạn như 'tự động tràn', 'cuộn tràn', 'ẩn tràn', 'hiển thị tràn', v.v. Các tiện ích này xác định cách một phần tử cụ thể xử lý nội dung vượt quá vùng chứa kích cỡ. Mỗi tiện ích cung cấp chức năng duy nhất, tuy nhiên, mục tiêu cuối cùng của chúng vẫn giống nhau, tức là kiểm soát hành vi tràn của phần tử được chọn.
< / div >
< / thân hình >
- 'tràn-tự động' lớp được sử dụng để thêm thanh cuộn vào vùng chứa và chỉ hiển thị chúng khi cần cuộn.
- “bg-tím-300” lớp đặt màu tím thành màu nền của vùng chứa.
- “p-4” lớp đặt 4 đơn vị đệm trên tất cả các mặt của vùng chứa.
- “mx-16” class áp dụng 16 đơn vị lề trên trục x của vùng chứa.
- “mt-5” lớp áp dụng 5 đơn vị ký quỹ cho phần trên cùng của vùng chứa.
- “h-32” class đặt chiều cao của vùng chứa thành 32 đơn vị.
- “căn chỉnh văn bản” lớp biện minh cho văn bản của nội dung bên trong vùng chứa.
đầu ra
Đầu ra ở trên hiển thị một thanh cuộn dọc khi văn bản tràn ra. Điều này chỉ ra rằng các 'tràn-tự động' tiện ích đã được áp dụng thành công cho phần tử.
Làm cách nào để sử dụng 'overflow-scroll' trong Tailwind?
Tiện ích này thêm thanh cuộn vào vùng chứa và luôn hiển thị chúng ngay cả khi không cần cuộn. Nó cũng cho phép cuộn theo mọi hướng. Để sử dụng tính năng “cuộn tràn” trong Tailwind, hãy tạo một chương trình HTML và thêm 'cuộn tràn' lớp tiện ích cho phần tử cụ thể trong chương trình HTML.
cú pháp
< yếu tố lớp học = 'cuộn tràn...' > ... yếu tố > Ví dụ
Trong ví dụ này, chúng ta sẽ áp dụng 'cuộn tràn' tiện ích cho
< div lớp học = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS cung cấp nhiều tiện ích 'tràn' khác nhau, chẳng hạn như 'tự động tràn', 'cuộn tràn', 'ẩn tràn', 'hiển thị tràn', v.v. Các tiện ích này xác định cách một phần tử cụ thể xử lý nội dung vượt quá vùng chứa kích cỡ. Mỗi tiện ích cung cấp chức năng duy nhất, tuy nhiên, mục tiêu cuối cùng của chúng vẫn giống nhau, tức là kiểm soát hành vi tràn của phần tử được chọn.
< / div >
< / thân hình >
Ở đây, 'cuộn tràn' lớp được sử dụng để thêm thanh cuộn vào
container và luôn hiển thị chúng.đầu ra
Trong đầu ra ở trên, có thể nhìn thấy cả thanh cuộn dọc và ngang. Điều này chỉ ra rằng các 'cuộn tràn' tiện ích đã được áp dụng thành công cho phần tử.
Phần kết luận
Để sử dụng “overflow-auto” và “overflow-scroll” trong Tailwind, bạn cần phải thêm 'tràn-tự động' Và 'cuộn tràn' các lớp tiện ích cho các phần tử mong muốn trong chương trình HTML. Cả hai lớp tiện ích đều thêm thanh cuộn vào các phần tử đã chỉ định. Tuy nhiên, lớp “overflow-auto” chỉ hiển thị các thanh cuộn khi cần cuộn trong khi lớp “overflow-scroll” luôn hiển thị chúng ngay cả khi không cần cuộn. Bài viết này đã minh họa các phương pháp sử dụng “overflow-auto” và “overflow-scroll” trong Tailwind.