LabEx
EntrarJunte-se

Truncar Texto Multilinha

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, exploraremos o uso de CSS para truncar texto multilinha a um número especificado de linhas. Ao usar a propriedade -webkit-line-clamp e outras propriedades CSS relacionadas, podemos efetivamente limitar o número de linhas exibidas em um bloco de texto, tornando-o mais visualmente atraente e fácil de ler. Através deste laboratório, você aprenderá como implementar esta técnica em seus projetos de design web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Truncar Texto Multilinha

Você pode escrever o código em index.html e style.css.

Limitar texto multilinha a um número específico de linhas.

  • Use -webkit-line-clamp para definir o número máximo de linhas a serem exibidas.
  • Defina display como -webkit-box e -webkit-box-orient como vertical, pois são necessários para que -webkit-line-clamp seja aplicado.
  • Aplique overflow: hidden para ocultar qualquer estouro (overflow) após o texto ser truncado.
<p class="excerpt">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim
  eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus
  id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis
  urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a
  euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at,
  feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat,
  lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla
  ultrices dui turpis, interdum consectetur urna tempus at.
</p>

.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Resumo

Parabéns! Você concluiu o laboratório de Truncar Texto Multilinha. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.