LabEx
EntrarJunte-se

Truncar Texto com Overflow CSS

Beginner

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

Introdução

Neste laboratório, mergulharemos no mundo da programação CSS e aprenderemos como truncar texto que excede a largura de uma linha. Ao usar a combinação das propriedades overflow, white-space e text-overflow, seremos capazes de exibir uma elipse no final do texto truncado. Através deste laboratório, obteremos uma compreensão mais profunda de como otimizar a exibição de texto em websites.

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

index.html e style.css já foram fornecidos na VM.

Para truncar texto que é maior que uma linha e adicionar uma elipse no final, use as seguintes propriedades CSS:

  • overflow: hidden para evitar que o texto transborde suas dimensões
  • white-space: nowrap para evitar que o texto exceda uma linha em altura
  • text-overflow: ellipsis para adicionar uma elipse se o texto exceder suas dimensões
  • Especifique uma width (largura) fixa para o elemento para saber quando exibir uma elipse

Observe que este método só funciona para elementos de uma única linha. Por exemplo:

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

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