0 Compartilhamentos 405 Views

Como cortar texto sem usar uma linha de script

11 de janeiro de 2021

Um dos mais antigos dilemas da programação é a falta de controle sobre o dado que será exibido. Será que o texto daquela manchete vai caber no espaço reservado para ele? Será que o nome daquele funcionário não vai “estourar” o tamanho da célula na tabela? E se o texto do campo for grande demais? Para resolver isso, era necessário editar as strings, cortando os caracteres que ultrapassassem determinado limite.

Porém, essa dor de cabeça não existe mais, pelo menos não quando a gente precisa exibir esse conteúdo grande demais em uma página HTML. Graças ao CSS, é possível largar o pepino na mão do cliente e não mais a nível de servidor. Dependendo de como você configura o seu estilo, o texto será automaticamente cortado pelo navegador e ainda será possível exibir “…” na parte que foi suprimida.

A mágica acontece graças à propriedade text-overflow. A partir dela, o navegador entende a largura do container e, se o texto ultrapassar visualmente o limite estabelecido, haverá um corte.

Para utilizar text-overflow, é obrigatório que também sejam utilizadas as propriedades white-space: nowrap e overflow: hidden; ao mesmo tempo. A primeira lida com os espaços em branco entre as palavras e a segunda determina que o excesso de conteúdo seja escondido. Veja nosso exemplo:

O CSS acima determina que o texto termine com três pontinhos (“…”) quando atingir o limite (já reservado o espaço dos três pontinhos).

Outras opções para a propriedade text-overflow seriam:

  • clip: o valor padrão. O texto é simplesmente interrompido quando chega no limite do container.
  • string: ao invés de terminar com três pontinhos, o texto termina com a string especificada.

Lembrando que o container da parte que você deseja cortar precisa ter uma largura especificada para que haja o corte.

A propriedade text-overflow é suportada por 99.15% dos navegadores no mercado.

Carregando...

Você pode se interessar

Windows 11 vem aí?!
Artigos
72 visualizações
Artigos
72 visualizações

Windows 11 vem aí?!

Carlos L. A. da Silva - 15 de junho de 2021

Depois de mais de cinco anos, há claros sinais de que o Windows 10 será substituído por uma próxima versão do sistema operacional da Microsoft.

As “gambiarras” que os desenvolvedores de jogos utilizam
Artigos
222 visualizações
Artigos
222 visualizações

As “gambiarras” que os desenvolvedores de jogos utilizam

Carlos L. A. da Silva - 6 de junho de 2021

Não seja tão duro com você mesmo! O caminho da programação está lotado de "gambiarras" e até jogos conhecidos apelam para alguns truques.

Qual framework de PHP é o melhor para 2021?
Artigos
331 visualizações
Artigos
331 visualizações

Qual framework de PHP é o melhor para 2021?

Carlos L. A. da Silva - 27 de maio de 2021

A Theme Selection fez um comparativo das opções disponíveis no mercado e você vai bater o martelo sobre qual é o melhor framework para suas necessidades.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Adeus a Mandic, um dos “pais” da internet brasileira
Artigos
438 visualizações
438 visualizações

Adeus a Mandic, um dos “pais” da internet brasileira

Carlos L. A. da Silva - 18 de maio de 2021
O que é o FLoC e como ele afeta sua privacidade na internet?
Artigos
556 visualizações
556 visualizações

O que é o FLoC e como ele afeta sua privacidade na internet?

Carlos L. A. da Silva - 5 de maio de 2021
Como planejar e construir um projeto de programação
Artigos
794 visualizações
794 visualizações

Como planejar e construir um projeto de programação

Carlos L. A. da Silva - 19 de abril de 2021