В этой статье будет описана процедура фиксации текста в попутном ветре.
Как ограничить текст определенным количеством строк?
Класс ограничения строк в Tailwind ограничивает текстовое содержимое в блоке определенным количеством строк. При этом текстовый блок скроет текст после количества строк, указанного в классе. Его можно использовать на веб-странице, чтобы показать пользователю наличие некоторой текстовой информации или скрыть весь ненужный текст, чтобы избежать перенасыщения веб-страницы.
Синтаксис
Приведенный ниже синтаксис представлен в файле « сорт ” атрибут элемента для применения ограничения строки:
В указанном выше синтаксисе пользователь может использовать числа из « от 1 до 6 » для использования классов ограничения строк по умолчанию. Например, « линия-зажим-1 Класс ” не позволит текстовому содержимому превышать одну строку.
Давайте разберемся с концепцией класса «line-camp» на некоторых примерах.
Пример 1. Используйте класс Line Clamp, чтобы ограничить содержимое определенным количеством строк.
Давайте ограничим текстовое содержимое тремя строками, используя класс ограничения строк в Tailwind, как показано ниже:
< делитель сорт '=' ' округлый-LG Flex Justify-Center BG-Slate-200 м-5 П-4' >
< п сорт '=' 'линия-зажим-3 w-72' > Это образец абзаца. Он будет виден только в течение 3 строк. Весь контент после него станет скрытым. Это связано с классом зажима лески в Tailwind. < / п >
< / делитель >
Объяснение приведенного выше кода следующее:
- А» делитель элемент создается с закругленными углами с помощью параметра « округлый-LG ' сорт. Он обеспечивает поля и отступы с помощью « м-{число} » & « п-{число} » занятия.
- Затем элемент в элементе div центрируется с помощью « оправдывать-центр » класс и « гибкий Класс ” создает контейнер, который будет содержать дочерний элемент div.
- « bg-{цвет}-{число} Класс » устанавливает цвет фона элемента div.
- А» <р> создается тег, содержащий текстовый контент. Ему предоставляется фиксированная ширина с использованием параметра « ш-{число} ' сорт.
- Наконец, текстовое содержимое « п ” элемент ограничен тремя строками с использованием “ линия-зажим-3 ' сорт.
Выход
В выводе видно, что текстовое содержимое, превышающее указанный лимит в три строки, скрыто:
Пример 2. Использование класса Line Clamp с состояниями по умолчанию в Tailwind
Tailwind предоставляет различные состояния по умолчанию для элемента, которые можно использовать, чтобы сделать макеты дизайна более динамичными. Разработчик может использовать любой класс Tailwind с этими состояниями, чтобы предоставить указанное свойство дизайна элементу всякий раз, когда это состояние достигается. Аналогично, класс «line-clamp» также можно использовать с этими состояниями попутного ветра по умолчанию.
Синтаксис использования класса «line-clamp» с состоянием в Tailwind приведен ниже:
{ состояние } : линия-зажим- { число }Существует три состояния по умолчанию, которые описаны следующим образом:
- наведение: Это состояние элемента, когда пользователь наводит на него курсор мыши.
- фокус: Это состояние, когда элемент находится в фокусе. Например, пользователь переходит к элементу, нажимая клавишу «Tab».
- активный: Состояние, когда элемент активирован пользователем.
В приведенной ниже демонстрации все идентично предыдущему примеру. Единственное отличие состоит в том, что класс зажима лески имеет значение « зависать ' состояние:
< делитель сорт '=' ' округлый-LG Flex Justify-Center BG-Slate-200 м-5 П-4' >< п сорт '=' 'hover:line-clamp-3 w-72' > Это образец абзаца. Он будет виден только в течение 3 строк. Весь контент после него станет скрытым. Это связано с классом зажима лески в Tailwind. < / п >
< / делитель >
Обратите внимание, что « <р> ” класс предоставляется “ наведите курсор:line-clamp-3 », который будет ограничивать текстовое содержимое тремя строками всякий раз, когда пользователь наводит курсор мыши на поле содержимого.
Выход
В выводе ниже видно, что свойство зажима линии применяется, когда курсор мыши наводит курсор на блок:
Пример 3. Использование класса Line Clamp с точками останова
Точки останова — это медиа-запросы в Tailwind, которые помогают пользователям создавать адаптивный макет дизайна. Tailwind предоставляет пять точек останова по умолчанию с предопределенной минимальной шириной. Разработчик также может использовать класс ограничения строки с этими точками останова.
Синтаксис использования класса ограничения строки с точками останова следующий:
{ префиксы точек останова } : линия-зажим- { число }«Префиксы точек останова», упомянутые в приведенном выше синтаксисе, следующие:
- см: Эта точка останова имеет минимальную ширину 640 пикселей.
- мкр: Эта точка останова имеет минимальную ширину 768 пикселей.
- LG: Эта точка останова имеет минимальную ширину 1024 пикселя.
- хл: Эта точка останова имеет минимальную ширину 1280 пикселей.
- 2xl: Эта точка останова имеет минимальную ширину 1536 пикселей.
В приведенной ниже демонстрации « п ” элементу предоставляются разные классы ограничения строки на разных точках останова. Это изменит свойство ограничения строки текстового блока всякий раз, когда будет достигнута новая точка останова:
< div сорт '=' ' округлый-LG Flex Justify-Center BG-Slate-200 м-5 П-4' >< п сорт '=' 'line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Это образец абзаца. Он будет виден только в течение 3 строк. Весь контент после него станет скрытым. Это связано с классом зажима лески в Tailwind. < / п >
< / div >
По умолчанию элементу p присвоен класс «line-clamp-1». Однако текстовое содержимое элемента «p» будет ограничено одной строкой для « см точка останова, две строки для « Мэриленд » точку останова и три строки для « LG » точка останова.
Выход
Из вывода ясно, что свойство line-clamp текстового блока меняется при изменении размера экрана:
Мы продемонстрировали процедуру ограничения текста определенным количеством строк в Tailwind.
Заключение
Класс зажима строки в Tailwind ограничивает текстовое содержимое элемента указанным количеством строк. Класс «lin-clamp-{number}» используется в качестве синтаксиса для ограничения текста ограниченными строками. Класс зажима линии можно использовать с заранее определенными точками останова и вариантами состояния в Tailwind. В этой статье представлена процедура ограничения текста указанным количеством строк.