Questo articolo fornirà la procedura per bloccare il testo in un Tailwind.
Come vincolare il testo a un numero specifico di righe?
La classe di blocco delle righe in Tailwind limita il contenuto del testo in un blocco a un determinato numero di righe. In questo modo il blocco di testo nasconderà il testo dopo il numero di righe specificato nella classe. Può essere utilizzato su una pagina web per mostrare all'utente che sono presenti alcune informazioni di testo o per nascondere tutto il testo non necessario per evitare la saturazione della pagina web.
Sintassi
La sintassi indicata di seguito è fornita nel ' classe 'Attributo di un elemento per applicare il bloccaggio della linea:
Nella sintassi sopra definita, l'utente può utilizzare i numeri da ' da 1 a 6 ' per utilizzare le classi di bloccaggio della linea predefinite. Ad esempio, il “ morsetto-linea-1 ' La classe non consentirà al contenuto del testo di superare una riga.
Cerchiamo di comprendere il concetto di classe “line-camp” attraverso alcuni esempi.
Esempio 1: utilizzare la classe Line Clamp per limitare il contenuto a un numero specifico di righe
Limitiamo il contenuto del testo a tre righe utilizzando la classe di bloccaggio della linea in Tailwind come fatto di seguito:
< div classe = ' flex-lg arrotondato giustifica-centro bg-ardesia-200 m-5 p-4' >
< P classe = 'morsetto-filo-3 w-72' > Questo è un paragrafo d'esempio. Sarà visibile solo per 3 righe. Tutto il contenuto successivo verrà nascosto. Ciò è dovuto alla classe di bloccaggio della linea in Tailwind. < / P >
< / div >
La spiegazione del codice sopra è la seguente:
- UN ' div L'elemento ' viene creato con angoli arrotondati utilizzando l'elemento ' arrotondato-lg ' classe. Fornisce il margine e il riempimento utilizzando il ' m-{numero} ' & ' p-{numero} ' classi.
- Successivamente, l'elemento nell'elemento div viene centrato utilizzando il comando ' giustifica-centro ' classe e il ' flettere ” crea un contenitore che conterrà l'elemento figlio del div.
- IL ' bg-{colore}-{numero} La classe 'imposta il colore di sfondo dell'elemento div.
- UN ' ' viene creato il tag contenente il contenuto del testo. Viene fornita una larghezza fissa utilizzando il comando “ w-{numero} ' classe.
- Infine, il contenuto testuale del “ P L'elemento ' è limitato a tre righe utilizzando l'elemento ' morsetto-3 ' classe.
Produzione
Nell'output si può vedere che il contenuto del testo che supera il limite specificato di tre righe è nascosto:
Esempio 2: utilizzare la classe Line Clamp con gli stati predefiniti in Tailwind
Tailwind fornisce vari stati predefiniti per un elemento che possono essere utilizzati per rendere più dinamici i layout di progettazione. Lo sviluppatore può utilizzare qualsiasi classe Tailwind con questi stati per fornire la proprietà di progettazione specificata all'elemento ogni volta che viene raggiunto tale stato. Allo stesso modo, la classe “line-clamp” può essere utilizzata anche con questi stati Tailwind predefiniti.
Di seguito è riportata la sintassi per l'utilizzo della classe “line-clamp” con uno stato in Tailwind:
{ stato } : morsetto-filo- { numero }Esistono tre stati predefiniti descritti di seguito:
- passa il mouse: È lo stato di un elemento quando l'utente posiziona il cursore del mouse su di esso.
- messa a fuoco: È lo stato in cui l'elemento è a fuoco. Ad esempio, l'utente accede all'elemento premendo il tasto 'tab'.
- attivo: Lo stato in cui l'elemento viene attivato dall'utente.
Nella dimostrazione seguente, tutto è identico all'esempio precedente. L'unica differenza è che la classe di bloccaggio del cavo è fornita con il ' passa il mouse ' stato:
< div classe = ' flex-lg arrotondato giustifica-centro bg-ardesia-200 m-5 p-4' >< P classe = ' passa il mouse:line-clamp-3 w-72' > Questo è un paragrafo d'esempio. Sarà visibile solo per 3 righe. Tutto il contenuto successivo verrà nascosto. Ciò è dovuto alla classe di bloccaggio del filo in Tailwind. < / P >
< / div >
Da notare che il “ La classe ' è fornita dal ' passa il mouse:line-clamp-3 ', che limiterà il contenuto del testo a tre righe ogni volta che l'utente posiziona il cursore del mouse sulla casella del contenuto.
Produzione
Nell'output seguente si può vedere che la proprietà di blocco della linea viene applicata quando il cursore del mouse passa sopra il blocco:
Esempio 3: utilizzare la classe Line Clamp con punti di interruzione
I punti di interruzione sono query multimediali in Tailwind che aiutano gli utenti a creare un layout di progettazione reattivo. Tailwind fornisce cinque punti di interruzione predefiniti con larghezze minime predefinite. Lo sviluppatore può anche utilizzare la classe di bloccaggio della linea con questi punti di interruzione.
La sintassi per utilizzare una classe di bloccaggio della linea con punti di interruzione è la seguente:
{ prefissi dei punti di interruzione } : morsetto-filo- { numero }I 'prefissi dei punti di interruzione' menzionati nella sintassi precedente sono i seguenti:
- sm: Questo punto di interruzione ha una larghezza minima di 640 px.
- md: Questo punto di interruzione ha una larghezza minima di 768 px.
- LG: Questo punto di interruzione ha una larghezza minima di 1024 px.
- XL: Questo punto di interruzione ha una larghezza minima di 1280 px.
- 2XL: Questo punto di interruzione ha una larghezza minima di 1536 px.
Nella dimostrazione fornita di seguito, il ' P L'elemento è dotato di diverse classi di bloccaggio della linea su diversi punti di interruzione. Ciò modificherà la proprietà di bloccaggio della riga del blocco di testo ogni volta che viene raggiunto il nuovo punto di interruzione:
< div classe = ' flex-lg arrotondato giustifica-centro bg-ardesia-200 m-5 p-4' >< P classe = 'line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Questo è un paragrafo d'esempio. Sarà visibile solo per 3 righe. Tutto il contenuto successivo verrà nascosto. Ciò è dovuto alla classe di bloccaggio del filo in Tailwind. < / P >
< / div >
L'elemento p viene fornito con una classe 'line-clamp-1' per impostazione predefinita. Tuttavia, il contenuto del testo nell'elemento “p” sarà limitato a una riga per “ sm ' punto di interruzione, due righe per il ' md ' punto di interruzione e tre righe per ' lg ' punto di rottura.
Produzione
Dall'output, è chiaro che la proprietà line-clamp del blocco di testo cambia al variare delle dimensioni dello schermo:
Abbiamo dimostrato la procedura per vincolare il testo a un numero specifico di righe in Tailwind.
Conclusione
La classe line clamp in Tailwind limita il contenuto testuale di un elemento al numero di righe specificato. La classe 'lin-clamp-{number}' viene utilizzata come sintassi per fissare il testo a righe limitate. La classe line clamp può essere utilizzata con i punti di interruzione predefiniti e le varianti di stato in Tailwind. Questo articolo ha fornito la procedura per limitare il testo a un numero specificato di righe.