Тази статия ще предостави процедурата за затягане на текста в Tailwind.
Как да закрепя текст към определен брой редове?
Класът за притискане на редове в Tailwind ограничава текстовото съдържание в блок до определен брой редове. Правейки това, текстовият блок ще скрие текста след броя редове, посочени в класа. Може да се използва на уеб страница, за да покаже на потребителя, че има някаква текстова информация или да скрие целия ненужен текст, за да избегне насищане на уеб страницата.
Синтаксис
Даденият по-долу синтаксис е предоставен в „ клас ” атрибут на елемент за прилагане на затягане на линия:
В дефинирания по-горе синтаксис потребителят може да използва числата от „ 1 до 6 ” за използване на класовете за затягане на линия по подразбиране. Например „ линия-скоба-1 ” няма да позволи текстовото съдържание да надвишава един ред.
Нека разберем концепцията за класа „line-camp“ чрез някои примери.
Пример 1: Използвайте класа Line Clamp, за да ограничите съдържанието до конкретен брой редове
Нека ограничим текстовото съдържание до три реда, използвайки класа за затягане на линии в Tailwind, както е направено по-долу:
< див клас = 'rounded-lg flex justify-center bg-slate-200 m-5 p-4' >
< стр клас = 'line-clamp-3 w-72' > Това е примерен параграф. Ще се вижда само за 3 реда. Цялото съдържание след него ще бъде скрито. Това се дължи на класа на затягане на линията в Tailwind. < / стр >
< / див >
Обяснението на горния код е както следва:
- A “ див ” е създаден със заоблени ъгли с помощта на „ заоблен-lg ” клас. Той осигурява полето и подложката с помощта на „ m-{число} ” & “ p-{число} ” класове.
- След това елементът в елемента div се центрира с помощта на „ justify-center “ клас и „ flex ” клас създава контейнер, който ще съдържа дъщерния елемент на div.
- „ bg-{цвят}-{номер} ” клас задава цвета на фона на елемента div.
- A “ ” се създава таг, съдържащ текстовото съдържание. Предоставя се фиксирана ширина с помощта на „ w-{номер} ” клас.
- И накрая, текстовото съдържание на „ стр ” е ограничен до три реда с помощта на „ линия-скоба-3 ” клас.
Изход
Може да се види в изхода, че текстовото съдържание, което надвишава указаното ограничение от три реда, е скрито:
Пример 2: Използвайте класа Line Clamp със състояния по подразбиране в Tailwind
Tailwind предоставя различни състояния по подразбиране за елемент, който може да се използва, за да направи оформлението на дизайна по-динамично. Разработчикът може да използва всеки клас Tailwind с тези състояния, за да предостави указаното дизайнерско свойство на елемента, когато това състояние бъде постигнато. По подобен начин класът „line-clamp“ може да се използва и с тези състояния на Tailwind по подразбиране.
Синтаксисът за използване на класа „line-clamp“ със състояние в Tailwind е даден по-долу:
{ състояние } : линия-скоба- { номер }Има три състояния по подразбиране, които са описани по-долу:
- движи се: Това е състоянието на елемент, когато потребителят задържи курсора на мишката върху него.
- фокус: Това е състоянието, когато елементът е на фокус. Например, потребителят навигира до елемента чрез натискане на клавиша „tab“.
- активен: Състоянието, когато елементът е активиран от потребителя.
В демонстрацията по-долу всичко е идентично с предишния пример. Единствената разлика е, че класът за затягане на линията е снабден с „ завъртам ” състояние:
< див клас = 'rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< стр клас = ' hover:line-clamp-3 w-72' > Това е примерен параграф. Ще се вижда само за 3 реда. Цялото съдържание след него ще бъде скрито. Това се дължи на класа на затягане на лин в Tailwind. < / стр >
< / див >
Имайте предвид, че ' ” се предоставя от „ hover:line-clamp-3 ”, който ще ограничи текстовото съдържание до три реда, когато потребителят задържи курсора на мишката върху полето със съдържание.
Изход
Може да се види в изхода по-долу, че свойството за затягане на линия се прилага, когато курсорът на мишката се движи над блока:
Пример 3: Използвайте класа Line Clamp с точки на прекъсване
Точките на прекъсване са медийни заявки в Tailwind, които помагат на потребителите да създадат адаптивен дизайн. Tailwind предоставя пет точки на прекъсване по подразбиране с предварително зададени минимални ширини. Разработчикът може също да използва класа за затягане на линия с тези точки на прекъсване.
Синтаксисът за използване на клас за захващане на линия с точки на прекъсване е както следва:
{ префикси на точки на прекъсване } : линия-скоба- { номер }„Префиксите на точката на прекъсване“, споменати в горния синтаксис, са както следва:
- sm: Тази точка на прекъсване има минимална ширина от 640px.
- MD: Тази точка на прекъсване има минимална ширина от 768px.
- lg: Тази точка на прекъсване има минимална ширина от 1024px.
- xl: Тази точка на прекъсване има минимална ширина от 1280px.
- 2xl: Тази точка на прекъсване има минимална ширина от 1536px.
В представената по-долу демонстрация „ стр ” е снабден с различни класове за затягане на линия на различни точки на прекъсване. Това ще промени свойството за притискане на линията на текстовия блок всеки път, когато бъде достигната новата точка на прекъсване:
< див клас = 'rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< стр клас = 'line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Това е примерен параграф. Ще се вижда само за 3 реда. Цялото съдържание след него ще бъде скрито. Това се дължи на класа на затягане на лин в Tailwind. < / стр >
< / див >
Елементът p е снабден с клас 'line-clamp-1' по подразбиране. Въпреки това текстовото съдържание в елемента „p“ ще бъде ограничено до един ред за „ см ' точка на прекъсване, два реда за ' md ' точка на прекъсване и три реда за ' lg ' точка на пречупване.
Изход
От изхода става ясно, че свойството за притискане на линията на текстовия блок се променя с промяната на размера на екрана:
Ние демонстрирахме процедурата за фиксиране на текст към определен брой редове в Tailwind.
Заключение
Класът за затягане на линия в Tailwind ограничава текстовото съдържание на елемент до определения брой редове. Класът „lin-clamp-{number}“ се използва като синтаксис за притискане на текста към ограничени редове. Класът за затягане на линия може да се използва с предварително дефинираните точки на прекъсване и вариантите на състоянието в Tailwind. Тази статия предоставя процедурата за фиксиране на текста към определен брой редове.