Artikel ini akan memberikan prosedur untuk menjepit teks di Tailwind.
Bagaimana Cara Menjepit Teks ke Jumlah Baris Tertentu?
Kelas penjepitan baris di Tailwind membatasi konten teks dalam satu blok hingga sejumlah baris tertentu. Dengan melakukan ini, blok teks akan menyembunyikan teks setelah jumlah baris yang ditentukan di kelas. Ini dapat digunakan pada halaman web untuk menunjukkan kepada pengguna bahwa ada beberapa informasi teks atau untuk menyembunyikan semua teks yang tidak perlu untuk menghindari saturasi pada halaman web.
Sintaksis
Sintaks yang diberikan di bawah ini disediakan di “ kelas ” atribut elemen untuk menerapkan penjepitan garis:
Dalam sintaks yang ditentukan di atas, pengguna dapat menggunakan angka dari “ 1 sampai 6 ” untuk menggunakan kelas penjepit garis default. Misalnya, “ penjepit garis-1 ” kelas tidak akan membiarkan konten teks melebihi satu baris.
Mari kita pahami konsep kelas “line-camp” melalui beberapa contoh.
Contoh 1: Gunakan Kelas Penjepit Garis untuk Membatasi Konten pada Jumlah Baris Tertentu
Mari batasi konten teks menjadi tiga baris menggunakan kelas penjepitan baris di Tailwind seperti yang dilakukan di bawah ini:
< div kelas = 'bulat-lg flex justify-center bg-slate-200 m-5 p-4' >
< P kelas = 'penjepit garis-3 w-72' > Ini adalah contoh Paragraf. Itu hanya akan terlihat untuk 3 baris. Semua konten setelahnya akan disembunyikan. Hal ini disebabkan oleh kelas penjepitan garis di Tailwind. < / P >
< / div >
Penjelasan kode di atas adalah sebagai berikut:
- A ' div ” Elemen dibuat dengan sudut membulat menggunakan “ bulat-lg ' kelas. Ini memberikan margin dan padding menggunakan “ m-{angka} ” & “ p-{angka} ” kelas.
- Selanjutnya, elemen dalam elemen div dipusatkan menggunakan “ justifikasi-pusat kelas ', dan' melenturkan ” kelas membuat wadah yang akan berisi elemen anak div.
- “ bg-{warna}-{angka} ” kelas mengatur warna latar belakang elemen div.
- A ' Tag ” dibuat berisi konten teks. Ini disediakan dengan lebar tetap menggunakan “ w-{angka} ' kelas.
- Terakhir, isi teks dari “ P ” elemen dibatasi hingga tiga baris menggunakan “ penjepit garis-3 ' kelas.
Keluaran
Dapat dilihat pada keluaran bahwa konten teks yang melebihi batas yang ditentukan yaitu tiga baris disembunyikan:
Contoh 2: Gunakan Kelas Penjepit Garis Dengan Status Default di Tailwind
Tailwind menyediakan berbagai status default untuk elemen yang dapat digunakan untuk membuat tata letak desain lebih dinamis. Pengembang dapat menggunakan kelas Tailwind apa pun dengan status ini untuk menyediakan properti desain yang ditentukan ke elemen setiap kali status tersebut tercapai. Demikian pula, kelas “penjepit garis” juga dapat digunakan dengan status Tailwind default ini.
Sintaks untuk menggunakan kelas “line-clamp” dengan status di Tailwind diberikan di bawah ini:
{ negara } : penjepit garis- { nomor }Ada tiga status default yang dijelaskan sebagai berikut:
- arahkan: Ini adalah keadaan suatu elemen ketika pengguna mengarahkan kursor mouse ke atasnya.
- fokus: Ini adalah keadaan ketika elemen berada dalam fokus. Misalnya, pengguna menavigasi ke elemen dengan menekan tombol “tab”.
- aktif: Keadaan saat elemen diaktifkan oleh pengguna.
Dalam demonstrasi di bawah ini, semuanya identik dengan contoh sebelumnya. Satu-satunya perbedaan adalah bahwa kelas penjepitan garis dilengkapi dengan “ melayang ' negara:
< div kelas = 'bulat-lg flex justify-center bg-slate-200 m-5 p-4' >< P kelas = ' arahkan kursor:penjepit garis-3 w-72' > Ini adalah contoh Paragraf. Itu hanya akan terlihat untuk 3 baris. Semua konten setelahnya akan disembunyikan. Hal ini disebabkan oleh kelas penjepitan lin di Tailwind. < / P >
< / div >
Perhatikan bahwa “ ” kelas disediakan oleh “ arahkan kursor:penjepit garis-3 kelas ”, yang akan membatasi konten teks menjadi tiga baris setiap kali pengguna mengarahkan kursor mouse ke kotak konten.
Keluaran
Dapat dilihat pada keluaran di bawah ini bahwa properti penjepitan garis diterapkan ketika kursor mouse melayang di atas blok:
Contoh 3: Gunakan Kelas Line Clamp Dengan Breakpoints
Breakpoint adalah kueri media di Tailwind yang membantu pengguna membuat tata letak desain yang responsif. Tailwind menyediakan lima titik henti sementara default dengan lebar minimum yang telah ditentukan sebelumnya. Pengembang juga dapat menggunakan kelas penjepitan garis dengan breakpoint ini.
Sintaks penggunaan kelas penjepit garis dengan breakpoint adalah sebagai berikut:
{ awalan breakpoint } : penjepit garis- { nomor }“Awalan breakpoint” yang disebutkan dalam sintaks di atas adalah sebagai berikut:
- sm: Breakpoint ini memiliki lebar minimum 640px.
- md: Breakpoint ini memiliki lebar minimum 768px.
- lg: Breakpoint ini memiliki lebar minimum 1024px.
- xl: Breakpoint ini memiliki lebar minimum 1280px.
- 2xl: Breakpoint ini memiliki lebar minimum 1536px.
Dalam demonstrasi yang disediakan di bawah ini, “ P Elemen ” dilengkapi dengan kelas penjepit garis yang berbeda pada titik henti sementara yang berbeda. Ini akan mengubah properti penjepitan baris pada blok teks setiap kali breakpoint baru tercapai:
< div kelas = 'bulat-lg flex justify-center bg-slate-200 m-5 p-4' >< P kelas = ' penjepit-garis-1 lg:penjepit-garis-3 md:penjepit-garis-2 sm:penjepit-garis-1 w-72' > Ini adalah contoh Paragraf. Itu hanya akan terlihat untuk 3 baris. Semua konten setelahnya akan disembunyikan. Hal ini disebabkan oleh kelas penjepitan lin di Tailwind. < / P >
< / div >
Elemen p dilengkapi dengan kelas “line-clamp-1” secara default. Namun, konten teks dalam elemen “p” akan dibatasi pada satu baris untuk “ sm ” breakpoint, dua baris untuk “ md ” breakpoint, dan tiga baris untuk “ lg ” titik henti sementara.
Keluaran
Dari outputnya, jelas bahwa properti line-clamp dari blok teks berubah seiring perubahan ukuran layar:
Kami telah mendemonstrasikan prosedur untuk menjepit teks ke sejumlah baris tertentu di Tailwind.
Kesimpulan
Kelas penjepit garis di Tailwind membatasi konten teks suatu elemen hingga jumlah baris yang ditentukan. Kelas “lin-clamp-{number}” digunakan sebagai sintaks untuk menjepit teks ke baris terbatas. Kelas penjepit garis dapat digunakan dengan titik henti sementara yang telah ditentukan sebelumnya dan varian status di Tailwind. Artikel ini telah menyediakan prosedur untuk menjepit teks ke sejumlah baris tertentu.