Artikel ini akan menunjukkan:
- Bagaimana untuk Menggunakan 'tersembunyi limpahan' dalam Tailwind?
- Bagaimana untuk Menggunakan 'terlihat limpahan' dalam Tailwind?
Bagaimana untuk Menggunakan 'tersembunyi limpahan' dalam Tailwind?
The 'tersembunyi limpahan' kelas menyembunyikan atau klip kandungan yang melebihi saiz elemen itu. Untuk menggunakan 'tersembunyi limpahan' dalam Tailwind, cipta program HTML dan gunakan kelas utiliti 'tersembunyi limpahan' dengan elemen khusus.
Sintaks
Contoh
Dalam contoh ini, kami akan menggunakan 'tersembunyi limpahan' utiliti kepada bekas
< badan >
< div kelas = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS menyediakan pelbagai 'limpahan' utiliti, seperti 'auto limpahan' , 'tatal limpahan' , 'tersembunyi limpahan' ,
'terlihat limpahan' dll. Utiliti ini menentukan cara elemen tertentu mengendalikan kandungan yang melebihi
bekas saiz . Setiap utiliti menawarkan kefungsian unik, namun, matlamat akhir mereka tetap sama, iaitu untuk mengawal
tingkah laku limpahan dipilih unsur.
< / div >
< / badan >
di sini:
- 'tersembunyi limpahan' kelas digunakan untuk menyembunyikan kandungan yang melebihi saiz bekas .
- “bg-purple-300” kelas menetapkan warna ungu ke latar belakang bekas.
- “p-4” kelas menetapkan 4 unit padding pada semua sisi bekas.
- “mx-16” kelas menggunakan 16 unit margin pada paksi-x bekas.
- “mt-5” kelas menggunakan 5 unit jidar ke bahagian atas bekas.
- “h-32” kelas menetapkan ketinggian bekas kepada 32 unit.
- 'justify teks' kelas membenarkan teks kandungan di dalam bekas.
Pengeluaran
Dalam output di atas, kandungan melimpah tidak dapat dilihat yang menunjukkan bahawa sifat 'tersembunyi limpahan' telah berjaya digunakan.
Bagaimana untuk Menggunakan 'terlihat limpahan' dalam Tailwind?
The “kelihatan limpahan” kelas membolehkan kandungan yang melampaui batas dapat dilihat. Untuk menggunakan 'terlihat limpahan' dalam Tailwind, buat struktur HTML dan gunakan kelas utiliti 'terlihat limpahan' dengan elemen tertentu.
Sintaks
Contoh
Dalam contoh ini, kami akan menggunakan “kelihatan limpahan” utiliti kepada bekasuntuk menunjukkan kandungan limpahan: < badan >
< div kelas = 'limpahan-kelihatan bg-ungu-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS menyediakan pelbagai 'limpahan' utiliti, seperti 'auto limpahan' , 'tatal limpahan' , 'tersembunyi limpahan' ,
'terlihat limpahan' dll. Utiliti ini menentukan cara elemen tertentu mengendalikan kandungan yang melebihi
bekas saiz . Setiap utiliti menawarkan kefungsian unik, walau bagaimanapun, matlamat akhir mereka tetap sama, iaitu untuk mengawal
tingkah laku limpahan dipilih unsur.
< / div >
< / badan >Di sini, dalam coretan kod di atas, the “kelihatan limpahan” kelas digunakan untuk menunjukkan kandungan yang melebihi saiz bekas.
Pengeluaran
Mengikut output di atas, utiliti 'terlihat limpahan' telah berjaya digunakan.
Kesimpulan
Untuk menggunakan 'tersembunyi limpahan' dan 'terlihat limpahan' dalam Tailwind, tambahkan 'tersembunyi limpahan' dan “kelihatan limpahan” kelas utiliti dengan elemen yang dikehendaki dalam program HTML. Utiliti 'tersembunyi limpahan' menyembunyikan kandungan limpahan manakala 'terlihat limpahan' menunjukkan kandungan limpahan unsur yang ditentukan. Artikel ini telah memberi contoh kaedah menggunakan utiliti 'tersembunyi limpahan' dan 'terlihat limpahan' dalam Tailwind.