Bagaimana Cara Menggunakan 'overflow-hidden' dan 'overflow-visible' di Tailwind?

untuk menyembunyikan konten luapan:

< tubuh >

< div kelas = 'meluap-tersembunyi bg-ungu-300 p-4 mx-16 mt-5 h-32 pembenaran teks' >
Tailwind CSS menyediakan berbagai 'meluap' utilitas, seperti 'overflow-otomatis' , 'meluap-gulir' , 'meluap-tersembunyi' ,
'luapan-terlihat' dll. Utilitas ini menentukan bagaimana elemen tertentu menangani isi yang melebihi
wadah ukuran . Setiap utilitas menawarkan fungsionalitas unik, namun tujuan akhirnya tetap sama, yaitu untuk mengontrol
perilaku luapan dari terpilih elemen.
< / div >

< / tubuh >

Di Sini:

---

---

• “meluap-tersembunyi” class digunakan untuk menyembunyikan konten yang melebihi ukuran wadah
  .
• “bg-ungu-300” class menyetel warna ungu ke latar belakang wadah.
• 'p-4' kelas menetapkan 4 unit bantalan di semua sisi wadah.
• 'mx-16' kelas menerapkan 16 unit margin pada sumbu x wadah.
• “mt-5” kelas menerapkan 5 unit margin ke bagian atas wadah.
• “h-32” class mengatur ketinggian wadah menjadi 32 unit.
• 'membenarkan teks' kelas membenarkan teks konten di dalam wadah.

Keluaran

Pada output di atas, konten overflow tidak terlihat yang menunjukkan bahwa properti 'overflow-hidden' telah berhasil diterapkan.

Bagaimana Cara Menggunakan 'overflow-visible' di Tailwind?

Itu “melimpah-terlihat” class memungkinkan konten yang melebihi batas terlihat. Untuk memanfaatkan 'overflow-visible' di Tailwind, buat struktur HTML dan terapkan kelas utilitas 'overflow-visible' dengan elemen tertentu.

Sintaksis

kelas = 'luapan-terlihat ...' >...< / elemen>

Contoh
Dalam contoh ini, kita akan menerapkan “melimpah-terlihat” utilitas ke wadah

untuk menampilkan konten luapan:

< tubuh >

< div kelas = 'luapan-terlihat bg-ungu-300 p-4 mx-16 mt-5 h-32 pembenaran teks' >
Tailwind CSS menyediakan berbagai 'meluap' utilitas, seperti 'overflow-otomatis' , 'meluap-gulir' , 'meluap-tersembunyi' ,
'luapan-terlihat' dll. Utilitas ini menentukan bagaimana elemen tertentu menangani isi yang melebihi
wadah ukuran . Setiap utilitas menawarkan fungsionalitas unik, namun tujuan akhirnya tetap sama, yaitu untuk mengontrol
perilaku luapan dari terpilih elemen.
< / div >

< / tubuh >

Di sini, di cuplikan kode di atas, file “melimpah-terlihat” class digunakan untuk menampilkan konten yang melebihi ukuran wadah.

Keluaran

Menurut output di atas, utilitas 'overflow-visible' telah berhasil diterapkan.

Kesimpulan

Untuk menggunakan 'overflow-hidden' dan 'overflow-visible' di Tailwind, tambahkan “meluap-tersembunyi” Dan “melimpah-terlihat” kelas utilitas dengan elemen yang diinginkan dalam program HTML. Utilitas 'overflow-hidden' menyembunyikan konten yang meluap sementara 'overflow-visible' menampilkan konten yang meluap dari elemen yang ditentukan. Artikel ini telah mencontohkan metode penggunaan utilitas 'overflow-hidden' dan 'overflow-visible' di Tailwind.