W tym artykule opisano procedurę zaciskania tekstu w Tailwind.
Jak zacisnąć tekst do określonej liczby linii?
Klasa zaciskania linii w Tailwind ogranicza zawartość tekstu w bloku do określonej liczby linii. W ten sposób blok tekstowy ukryje tekst po liczbie linii określonej w klasie. Można go użyć na stronie internetowej, aby pokazać użytkownikowi, że istnieją pewne informacje tekstowe lub ukryć cały niepotrzebny tekst, aby uniknąć nasycenia strony internetowej.
Składnia
Podana poniżej składnia jest podana w „ klasa ” atrybut elementu do zastosowania zaciskania linii:
W wyżej zdefiniowanej składni użytkownik może wykorzystać liczby z „ 1 do 6 ” w celu użycia domyślnych klas zaciskania linii. Na przykład „ zacisk liniowy-1 ” nie pozwoli, aby zawartość tekstu przekroczyła jedną linię.
Przyjrzyjmy się koncepcji klasy „line-camp” na kilku przykładach.
Przykład 1: Użyj klasy Line Clamp, aby ograniczyć zawartość do określonej liczby linii
Ograniczmy zawartość tekstu do trzech linii, korzystając z klasy zaciskania linii w Tailwind, jak pokazano poniżej:
< div klasa = ' zaokrąglony-lg flex justify-centrum bg-slate-200 m-5 p-4' >
< P klasa = 'zacisk liniowy-3 w-72' > To jest przykładowy ust. Będzie widoczny tylko dla 3 linii. Cała zawartość po nim zostanie ukryta. Wynika to z klasy zaciskania linki w Tailwind. < / P >
< / div >
Wyjaśnienie powyższego kodu jest następujące:
- A ' div ” element jest tworzony z zaokrąglonymi narożnikami za pomocą „ zaokrąglone-lg ' klasa. Zapewnia margines i dopełnienie za pomocą „ m-{liczba} ” i „ p-{liczba} zajęcia.
- Następnie element w elemencie div jest wyśrodkowany za pomocą „ wyśrodkuj „klasa” i „ przewód ” tworzy kontener, który będzie zawierał element potomny elementu div.
- „ bg-{kolor}-{liczba} ” class ustawia kolor tła elementu div.
- A ' ” tworzony jest tag zawierający treść tekstową. Zapewniana jest stała szerokość za pomocą opcji „ w-{numer} ' klasa.
- Wreszcie treść tekstowa „ P ” jest ograniczony do trzech linii przy użyciu „ zacisk liniowy-3 ' klasa.
Wyjście
Na wynikach widać, że treść tekstowa przekraczająca określony limit trzech linii jest ukryta:
Przykład 2: Użyj klasy Line Clamp ze stanami domyślnymi w Tailwind
Tailwind udostępnia różne domyślne stany elementu, których można użyć do zwiększenia dynamiki układów projektu. Deweloper może użyć dowolnej klasy Tailwind z tymi stanami, aby zapewnić elementowi określoną właściwość projektową za każdym razem, gdy ten stan zostanie osiągnięty. Podobnie, klasa „line-clamp” może być również używana z tymi domyślnymi stanami Tailwind.
Poniżej podana jest składnia użycia klasy „line-clamp” ze stanem w Tailwind:
{ państwo } : zacisk liniowy- { numer }Istnieją trzy stany domyślne, które opisano w następujący sposób:
- unosić się: Jest to stan elementu, gdy użytkownik najedzie na niego kursorem myszy.
- centrum: Jest to stan, w którym element jest ostry. Na przykład użytkownik przechodzi do elementu, naciskając klawisz „tab”.
- aktywny: Stan, w którym element jest aktywowany przez użytkownika.
W poniższej demonstracji wszystko jest identyczne jak w poprzednim przykładzie. Jedyna różnica polega na tym, że klasa zaciskania linii jest dostarczana z „ unosić się ' państwo:
< div klasa = ' zaokrąglony-lg flex justify-centrum bg-slate-200 m-5 p-4' >< P klasa = „hover:line-clamp-3 w-72” > To jest przykładowy ust. Będzie widoczny tylko dla 3 linii. Cała zawartość po nim zostanie ukryta. Wynika to z klasy zaciskania lin w Tailwind. < / P >
< / div >
Należy pamiętać, że „ ” jest prowadzona przez „ najedź kursorem:zacisk linii-3 ”, która ograniczy zawartość tekstu do trzech linii za każdym razem, gdy użytkownik najedzie kursorem myszy na pole zawartości.
Wyjście
Na poniższym wyjściu widać, że właściwość zaciskania linii jest stosowana, gdy kursor myszy znajduje się nad blokiem:
Przykład 3: Użyj klasy Line Clamp z punktami przerwania
Punkty przerwania to zapytania o media w Tailwind, które pomagają użytkownikom stworzyć responsywny układ projektu. Tailwind udostępnia pięć domyślnych punktów przerwania o predefiniowanych minimalnych szerokościach. Programista może również użyć klasy zaciskania linii z tymi punktami przerwania.
Składnia użycia klasy zaciskania linii z punktami przerwania jest następująca:
{ przedrostki punktów przerwania } : zacisk liniowy- { numer }„Przedrostki punktów przerwania” wspomniane w powyższej składni są następujące:
- sm: Ten punkt przerwania ma minimalną szerokość 640 pikseli.
- md: Ten punkt przerwania ma minimalną szerokość 768 pikseli.
- LG: Ten punkt przerwania ma minimalną szerokość 1024 pikseli.
- XL: Ten punkt przerwania ma minimalną szerokość 1280 pikseli.
- 2XL: Ten punkt przerwania ma minimalną szerokość 1536 pikseli.
W poniższej demonstracji „ P ” jest wyposażony w różne klasy zaciskania linii w różnych punktach przerwania. Spowoduje to zmianę właściwości zaciskania linii bloku tekstowego po osiągnięciu nowego punktu przerwania:
< div klasa = ' zaokrąglony-lg flex justify-centrum bg-slate-200 m-5 p-4' >< P klasa = ' zacisk liniowy-1 lg:zacisk liniowy-3 md:zacisk liniowy-2 sm:zacisk liniowy-1 w-72' > To jest przykładowy ust. Będzie widoczny tylko dla 3 linii. Cała zawartość po nim zostanie ukryta. Wynika to z klasy zaciskania lin w Tailwind. < / P >
< / div >
Element p domyślnie posiada klasę „line-clamp-1”. Jednakże zawartość tekstowa w elemencie „p” będzie ograniczona do jednej linii dla „ sm ” punkt przerwania, dwie linie dla „ md ” punkt przerwania i trzy linie dla „ lg „punkt przerwania.
Wyjście
Z danych wyjściowych jasno wynika, że właściwość zaciskania linii bloku tekstowego zmienia się wraz ze zmianą rozmiaru ekranu:
Zademonstrowaliśmy procedurę mocowania tekstu do określonej liczby wierszy w Tailwind.
Wniosek
Klasa zaciskania linii w Tailwind ogranicza zawartość tekstową elementu do określonej liczby linii. Klasa „lin-clamp-{number}” jest używana jako składnia do zawężania tekstu do ograniczonych linii. Klasy cęgów liniowych można używać ze wstępnie zdefiniowanymi punktami przerwania i wariantami stanu w Tailwind. W tym artykule opisano procedurę mocowania tekstu do określonej liczby wierszy.