0 Compartilhamentos 99 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

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
110 visualizações
Artigos
110 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

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

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
111 visualizações
Artigos
111 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021

Serviço do My Heritage permite "animar" fotos do passado, trazendo vida para seus antepassados. Como isso é possível?

Como se tornar um Engenheiro DevOps em 2021
Artigos
107 visualizações
Artigos
107 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021

A consultora de DevOps e evangelista Nana Janashia apresenta um passo a passo de tudo que você precisa saber para dominar o DevOps em 2021.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Seus dados vazaram. E agora?
Artigos
86 visualizações
86 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021
Entendendo o elemento time em HTML 5
Artigos
100 visualizações
100 visualizações

Entendendo o elemento time em HTML 5

Carlos L. A. da Silva - 5 de fevereiro de 2021
Como começar a programar
Artigos
130 visualizações
130 visualizações

Como começar a programar

Carlos L. A. da Silva - 7 de janeiro de 2021