Artikel ini akan menyediakan prosedur untuk mengepit teks dalam Tailwind.
Bagaimana untuk Mengapit Teks kepada Bilangan Baris Tertentu?
Kelas pengapit baris dalam Tailwind mengehadkan kandungan teks dalam blok kepada bilangan baris tertentu. Dengan melakukan ini, blok teks akan menyembunyikan teks selepas bilangan baris yang ditentukan dalam kelas. Ia boleh digunakan pada halaman web untuk menunjukkan kepada pengguna bahawa terdapat beberapa maklumat teks atau untuk menyembunyikan semua teks yang tidak diperlukan untuk mengelakkan ketepuan pada halaman web.
Sintaks
Sintaks yang diberikan di bawah disediakan dalam ' kelas ” atribut elemen untuk menggunakan pengapit baris:
Dalam sintaks yang ditakrifkan di atas, pengguna boleh menggunakan nombor daripada “ 1 hingga 6 ” untuk menggunakan kelas pengapit talian lalai. Sebagai contoh, ' pengapit talian-1 ” kelas tidak akan membiarkan kandungan teks melebihi satu baris.
Mari kita fahami konsep kelas 'line-camp' melalui beberapa contoh.
Contoh 1: Gunakan Kelas Pengapit Talian untuk Mengehadkan Kandungan kepada Bilangan Baris Tertentu
Mari hadkan kandungan teks kepada tiga baris menggunakan kelas pengapit baris dalam Tailwind seperti yang dilakukan di bawah:
< div kelas = ' bulat-lg flex justify-center bg-slate-200 m-5 p-4' >
< hlm kelas = ' pengapit talian-3 w-72' > Ini adalah contoh Perenggan. Ia hanya akan kelihatan untuk 3 baris. Semua kandungan selepasnya akan disembunyikan. Ini disebabkan oleh kelas pengapit talian di Tailwind. < / hlm >
< / div >
Penjelasan kod di atas adalah seperti berikut:
- A ' div elemen ' dicipta dengan sudut bulat menggunakan ' bulat-lg ” kelas. Ia menyediakan margin dan padding menggunakan ' m-{nombor} ” & “ p-{nombor} ” kelas.
- Seterusnya, elemen dalam elemen div dipusatkan menggunakan ' justify-center ” kelas, dan “ lentur ” kelas mencipta bekas yang akan mengandungi elemen anak div.
- ' bg-{warna}-{nombor} ” kelas menetapkan warna latar belakang elemen div.
- A ' tag ” dicipta mengandungi kandungan teks. Ia disediakan lebar tetap menggunakan ' w-{nombor} ” kelas.
- Akhir sekali, kandungan teks ' hlm elemen ' dihadkan kepada tiga baris menggunakan ' pengapit-tali-3 ” kelas.
Pengeluaran
Ia boleh dilihat dalam output bahawa kandungan teks yang melebihi had yang ditentukan iaitu tiga baris disembunyikan:
Contoh 2: Gunakan Kelas Pengapit Talian Dengan Keadaan Lalai dalam Tailwind
Tailwind menyediakan pelbagai keadaan lalai untuk elemen yang boleh digunakan untuk menjadikan reka letak reka bentuk lebih dinamik. Pembangun boleh menggunakan mana-mana kelas Tailwind dengan keadaan ini untuk menyediakan sifat reka bentuk yang ditentukan kepada elemen apabila keadaan itu dicapai. Begitu juga, kelas 'pengapit garis' juga boleh digunakan dengan keadaan Tailwind lalai ini.
Sintaks untuk menggunakan kelas 'line-clamp' dengan keadaan dalam Tailwind diberikan di bawah:
{ negeri } : pengapit talian- { nombor }Terdapat tiga keadaan lalai yang diterangkan seperti berikut:
- tuding: Ia adalah keadaan elemen apabila pengguna menuding kursor tetikus di atasnya.
- fokus: Ia adalah keadaan apabila elemen berada dalam fokus. Sebagai contoh, pengguna menavigasi ke elemen dengan menekan kekunci 'tab'.
- aktif: Keadaan apabila elemen diaktifkan oleh pengguna.
Dalam demonstrasi di bawah, semuanya adalah sama dengan contoh sebelumnya. Satu-satunya perbezaan ialah kelas pengapit talian disediakan dengan “ berlegar ” nyatakan:
< div kelas = ' bulat-lg flex justify-center bg-slate-200 m-5 p-4' >< hlm kelas = ' hover:line-clamp-3 w-72' > Ini adalah contoh Perenggan. Ia hanya akan kelihatan untuk 3 baris. Semua kandungan selepasnya akan disembunyikan. Ini disebabkan oleh kelas pengapit lin di Tailwind. < / hlm >
< / div >
Perhatikan bahawa ' 'kelas disediakan oleh' hover:line-clamp-3 ”, yang akan mengehadkan kandungan teks kepada tiga baris apabila pengguna menuding kursor tetikus di atas kotak kandungan.
Pengeluaran
Ia boleh dilihat dalam output di bawah bahawa sifat penjepit garis digunakan apabila kursor tetikus melayang di atas blok:
Contoh 3: Gunakan Kelas Pengapit Talian Dengan Titik Putus
Titik putus ialah pertanyaan media dalam Tailwind yang membantu pengguna membuat reka letak reka bentuk responsif. Tailwind menyediakan lima titik putus lalai dengan lebar minimum yang telah ditetapkan. Pembangun juga boleh menggunakan kelas pengapit talian dengan titik putus ini.
Sintaks untuk menggunakan kelas pengapit baris dengan titik putus adalah seperti berikut:
{ awalan titik putus } : pengapit talian- { nombor }'Awalan titik putus' yang disebut dalam sintaks di atas adalah seperti berikut:
- sm: Titik putus ini mempunyai lebar minimum 640px.
- md: Titik putus ini mempunyai lebar minimum 768px.
- lg: Titik putus ini mempunyai lebar minimum 1024px.
- xl: Titik putus ini mempunyai lebar minimum 1280px.
- 2xl: Titik putus ini mempunyai lebar minimum 1536px.
Dalam demonstrasi yang disediakan di bawah, ' hlm elemen ” disediakan dengan kelas pengapit baris yang berbeza pada titik putus yang berbeza. Ini akan menukar sifat pengapit baris bagi blok teks apabila titik putus baharu dicapai:
< div kelas = ' bulat-lg flex justify-center bg-slate-200 m-5 p-4' >< hlm kelas = ' pengapit talian-1 lg: pengapit-garis-3 md: pengapit-garis-2 sm: pengapit-garis-1 w-72' > Ini adalah contoh Perenggan. Ia hanya akan kelihatan untuk 3 baris. Semua kandungan selepasnya akan disembunyikan. Ini disebabkan oleh kelas pengapit lin di Tailwind. < / hlm >
< / div >
Elemen p disediakan dengan kelas 'line-clamp-1' secara lalai. Walau bagaimanapun, kandungan teks dalam elemen 'p' akan dihadkan kepada satu baris untuk ' sm ” titik putus, dua baris untuk “ md ” titik putus dan tiga baris untuk “ lg ” titik putus.
Pengeluaran
Daripada output, jelas bahawa sifat pengapit baris bagi blok teks berubah apabila saiz skrin berubah:
Kami telah menunjukkan prosedur untuk mengepit teks pada bilangan baris tertentu dalam Tailwind.
Kesimpulan
Kelas pengapit baris dalam Tailwind mengehadkan kandungan teks elemen kepada bilangan baris yang ditentukan. Kelas 'lin-clamp-{number}' digunakan sebagai sintaks untuk mengepit teks kepada baris terhad. Kelas pengapit garis boleh digunakan dengan titik putus yang telah ditetapkan dan varian keadaan dalam Tailwind. Artikel ini telah menyediakan prosedur untuk mengepit teks kepada bilangan baris tertentu.