Como fixar texto em um número específico de linhas no Tailwind

Este artigo fornecerá o procedimento para fixar o texto em um Tailwind.

Como fixar texto em um número específico de linhas?

A classe de fixação de linha no Tailwind limita o conteúdo do texto em um bloco a um determinado número de linhas. Ao fazer isso, o bloco de texto ocultará o texto após o número de linhas especificado na classe. Pode ser usado em uma página web para mostrar ao usuário que há alguma informação de texto ou para ocultar todo o texto desnecessário para evitar a saturação da página web.

Sintaxe

A sintaxe fornecida abaixo é fornecida no “ aula ” atributo de um elemento para aplicar fixação de linha:

Na sintaxe definida acima, o usuário pode usar os números de “ 1 a 6 ”Para usar as classes de fixação de linha padrão. Por exemplo, o “ grampo de linha-1 ”A classe não permitirá que o conteúdo do texto exceda uma linha.

Vamos entender o conceito de aula “line-camp” através de alguns exemplos.

Exemplo 1: Use a classe Line Clamp para limitar o conteúdo a um número específico de linhas

Vamos limitar o conteúdo do texto a três linhas usando a classe line-clamping no Tailwind conforme feito abaixo:

A explicação do código acima é a seguinte:

• A ' divisão ”O elemento é criado com cantos arredondados usando o“ arredondado-lg ' aula. Ele fornece a margem e o preenchimento usando o “ m-{número} ”&“ p-{número} ' Aulas.
• Em seguida, o elemento no elemento div é centralizado usando o “ justificar-centro ”classe, e o“ flexionar ”A classe cria um contêiner que conterá o elemento filho do div.
• O ' bg-{cor}-{número} ”classe define a cor de fundo do elemento div.
• A '

  ”é criada contendo o conteúdo do texto. É fornecida largura fixa usando o “ w-{número} ' aula.

• Finalmente, o conteúdo do texto do “ p ”O elemento é limitado a três linhas usando o“ grampo de linha-3 ' aula.

Saída

Pode-se observar na saída que o conteúdo do texto que excedeu o limite especificado de três linhas está oculto:

Exemplo 2: Use a classe Line Clamp com estados padrão no Tailwind

Tailwind fornece vários estados padrão para um elemento que pode ser usado para tornar os layouts de design mais dinâmicos. O desenvolvedor pode usar qualquer classe Tailwind com esses estados para fornecer a propriedade de design especificada ao elemento sempre que esse estado for alcançado. Da mesma forma, a classe “line-clamp” também pode ser usada com esses estados padrão do Tailwind.

A sintaxe para usar a classe “line-clamp” com um estado no Tailwind é fornecida abaixo:

Existem três estados padrão descritos a seguir:

• flutuar: É o estado de um elemento quando o usuário passa o cursor do mouse sobre ele.
• foco: É o estado em que o elemento está em foco. Por exemplo, o usuário navega até o elemento pressionando a tecla “tab”.
• ativo: O estado quando o elemento é ativado pelo usuário.

Na demonstração abaixo, tudo é idêntico ao exemplo anterior. A única diferença é que a classe de fixação de linha é fornecida com o “ flutuar ' estado:

Observe que o “

”a classe é fornecida pelo“ pairar:line-clamp-3 ”classe, que limitará o conteúdo do texto a três linhas sempre que o usuário passar o cursor do mouse sobre a caixa de conteúdo.

Saída

Pode-se ver na saída abaixo que a propriedade de fixação de linha é aplicada quando o cursor do mouse passa sobre o bloco:

Exemplo 3: Use a classe Line Clamp com pontos de interrupção

Pontos de interrupção são consultas de mídia no Tailwind que ajudam os usuários a criar um layout de design responsivo. Tailwind fornece cinco pontos de interrupção padrão com larguras mínimas predefinidas. O desenvolvedor também pode usar a classe de fixação de linha com esses pontos de interrupção.

A sintaxe para usar uma classe de fixação de linha com pontos de interrupção é a seguinte:

Os “prefixos de ponto de interrupção” mencionados na sintaxe acima são os seguintes:

• sm: Este ponto de interrupção tem largura mínima de 640px.
• médico: Este ponto de interrupção tem largura mínima de 768px.
• lg: Este ponto de interrupção tem largura mínima de 1024px.
• XL: Este ponto de interrupção tem largura mínima de 1280px.
• 2xl: Este ponto de interrupção tem largura mínima de 1536px.

Na demonstração fornecida abaixo, o “ p ”O elemento é fornecido com diferentes classes de fixação de linha em diferentes pontos de interrupção. Isso alterará a propriedade de fixação de linha do bloco de texto sempre que o novo ponto de interrupção for atingido:

O elemento p é fornecido com uma classe “line-clamp-1” por padrão. No entanto, o conteúdo do texto no elemento “p” será limitado a uma linha para o elemento “ sm ”ponto de interrupção, duas linhas para o“ médico ”ponto de interrupção e três linhas para o“ LG ”ponto de interrupção.

Saída

A partir da saída, fica claro que a propriedade line-clamp do bloco de texto muda conforme o tamanho da tela muda:

Demonstramos o procedimento para fixar texto a um número específico de linhas no Tailwind.

Conclusão

A classe de fixação de linha no Tailwind limita o conteúdo do texto de um elemento ao número especificado de linhas. A classe “lin-clamp-{number}” é usada como sintaxe para limitar o texto a linhas limitadas. A classe line clamp pode ser usada com os pontos de interrupção predefinidos e as variantes de estado no Tailwind. Este artigo forneceu o procedimento para limitar o texto a um determinado número de linhas.