Bagaimana untuk Memohon 'break-inside' pada Hover dalam Tailwind?

Artikel ini akan memberi contoh kaedah untuk menggunakan 'break-inside' pada tuding dalam Tailwind CSS.

Bagaimana untuk Memohon 'break-inside' pada Hover dalam Tailwind?

Untuk menggunakan 'break-inside' pada hover dalam Tailwind, gunakan sifat 'hover' dengan utiliti 'break-inside' khusus pada elemen yang dikehendaki dalam program HTML. Kemudian, lihat halaman web untuk pengesahan.

Untuk demonstrasi praktikal, cuba langkah yang disenaraikan di bawah:

Langkah 1: Gunakan Hover Property Dengan Utiliti 'break-inside'.
Buat program HTML dan gunakan ' berlegar ” harta dengan utiliti “pecah-dalam” yang dikehendaki. Sebagai contoh, kami telah menggunakan sifat hover dengan ' pecah-dalam-elak-lajur ” utiliti untuk mengelakkan pemecahan lajur dalam elemen

pada hover:

di sini:

• “ lajur-2 kelas ” digunakan untuk membahagikan
  kepada dua lajur.
• “ bg-kuning-500 ” kelas menetapkan warna kuning ke latar belakang
  .
• “ hover:break-in-avoid-column kelas ” dalam elemen

  menunjukkan bahawa apabila penunjuk tetikus melayang ke atas, pemisah lajur harus dielakkan dalam elemen

  .

Langkah 2: Sahkan Output
Untuk mengesahkan sama ada utiliti 'break-inside-avoid-column' telah berjaya digunakan pada tuding, lihat halaman web HTML:

Output di atas menunjukkan bahawa apabila pengguna melayang di atas elemen yang dikehendaki, pemisah lajur dalam elemen telah dielakkan. Ini menunjukkan bahawa 'break-inside-avoid-column' telah berjaya digunakan pada elemen pada tuding mengikut mana ia ditentukan.

Kesimpulan

Untuk menggunakan 'break-inside' pada tuding dalam Tailwind, gunakan ' berlegar 'harta dengan yang dikehendaki' pecah masuk ” utiliti dalam program HTML. Sifat hover boleh digunakan dengan mana-mana elemen. Untuk pengesahan, lihat halaman web. Artikel ini telah menerangkan kaedah untuk menggunakan 'break-inside' pada tuding dalam Tailwind CSS.