Как ограничить текст определенным количеством строк в Tailwind

В этой статье будет описана процедура фиксации текста в попутном ветре.

Как ограничить текст определенным количеством строк?

Класс ограничения строк в Tailwind ограничивает текстовое содержимое в блоке определенным количеством строк. При этом текстовый блок скроет текст после количества строк, указанного в классе. Его можно использовать на веб-странице, чтобы показать пользователю наличие некоторой текстовой информации или скрыть весь ненужный текст, чтобы избежать перенасыщения веб-страницы.

Синтаксис

Приведенный ниже синтаксис представлен в файле « сорт ” атрибут элемента для применения ограничения строки:

В указанном выше синтаксисе пользователь может использовать числа из « от 1 до 6 » для использования классов ограничения строк по умолчанию. Например, « линия-зажим-1 Класс ” не позволит текстовому содержимому превышать одну строку.

Давайте разберемся с концепцией класса «line-camp» на некоторых примерах.

Пример 1. Используйте класс Line Clamp, чтобы ограничить содержимое определенным количеством строк.

Давайте ограничим текстовое содержимое тремя строками, используя класс ограничения строк в Tailwind, как показано ниже:

Объяснение приведенного выше кода следующее:

• А» делитель элемент создается с закругленными углами с помощью параметра « округлый-LG ' сорт. Он обеспечивает поля и отступы с помощью « м-{число} » & « п-{число} » занятия.
• Затем элемент в элементе div центрируется с помощью « оправдывать-центр » класс и « гибкий Класс ” создает контейнер, который будет содержать дочерний элемент div.
• « bg-{цвет}-{число} Класс » устанавливает цвет фона элемента div.
• А» <р> создается тег, содержащий текстовый контент. Ему предоставляется фиксированная ширина с использованием параметра « ш-{число} ' сорт.
• Наконец, текстовое содержимое « п ” элемент ограничен тремя строками с использованием “ линия-зажим-3 ' сорт.

Выход

В выводе видно, что текстовое содержимое, превышающее указанный лимит в три строки, скрыто:

Пример 2. Использование класса Line Clamp с состояниями по умолчанию в Tailwind

Tailwind предоставляет различные состояния по умолчанию для элемента, которые можно использовать, чтобы сделать макеты дизайна более динамичными. Разработчик может использовать любой класс Tailwind с этими состояниями, чтобы предоставить указанное свойство дизайна элементу всякий раз, когда это состояние достигается. Аналогично, класс «line-clamp» также можно использовать с этими состояниями попутного ветра по умолчанию.

Синтаксис использования класса «line-clamp» с состоянием в Tailwind приведен ниже:

Существует три состояния по умолчанию, которые описаны следующим образом:

• наведение: Это состояние элемента, когда пользователь наводит на него курсор мыши.
• фокус: Это состояние, когда элемент находится в фокусе. Например, пользователь переходит к элементу, нажимая клавишу «Tab».
• активный: Состояние, когда элемент активирован пользователем.

В приведенной ниже демонстрации все идентично предыдущему примеру. Единственное отличие состоит в том, что класс зажима лески имеет значение « зависать ' состояние:

Обратите внимание, что « <р> ” класс предоставляется “ наведите курсор:line-clamp-3 », который будет ограничивать текстовое содержимое тремя строками всякий раз, когда пользователь наводит курсор мыши на поле содержимого.

Выход

В выводе ниже видно, что свойство зажима линии применяется, когда курсор мыши наводит курсор на блок:

Пример 3. Использование класса Line Clamp с точками останова

Точки останова — это медиа-запросы в Tailwind, которые помогают пользователям создавать адаптивный макет дизайна. Tailwind предоставляет пять точек останова по умолчанию с предопределенной минимальной шириной. Разработчик также может использовать класс ограничения строки с этими точками останова.

Синтаксис использования класса ограничения строки с точками останова следующий:

«Префиксы точек останова», упомянутые в приведенном выше синтаксисе, следующие:

• см: Эта точка останова имеет минимальную ширину 640 пикселей.
• мкр: Эта точка останова имеет минимальную ширину 768 пикселей.
• LG: Эта точка останова имеет минимальную ширину 1024 пикселя.
• хл: Эта точка останова имеет минимальную ширину 1280 пикселей.
• 2xl: Эта точка останова имеет минимальную ширину 1536 пикселей.

В приведенной ниже демонстрации « п ” элементу предоставляются разные классы ограничения строки на разных точках останова. Это изменит свойство ограничения строки текстового блока всякий раз, когда будет достигнута новая точка останова:

По умолчанию элементу p присвоен класс «line-clamp-1». Однако текстовое содержимое элемента «p» будет ограничено одной строкой для « см точка останова, две строки для « Мэриленд » точку останова и три строки для « LG » точка останова.

Выход

Из вывода ясно, что свойство line-clamp текстового блока меняется при изменении размера экрана:

Мы продемонстрировали процедуру ограничения текста определенным количеством строк в Tailwind.

Заключение

Класс зажима строки в Tailwind ограничивает текстовое содержимое элемента указанным количеством строк. Класс «lin-clamp-{number}» используется в качестве синтаксиса для ограничения текста ограниченными строками. Класс зажима линии можно использовать с заранее определенными точками останова и вариантами состояния в Tailwind. В этой статье представлена ​​процедура ограничения текста указанным количеством строк.