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

Sir Clive Sinclair, o homem adiantado no tempo
Artigos
68 visualizações
Artigos
68 visualizações

Sir Clive Sinclair, o homem adiantado no tempo

Carlos L. A. da Silva - 18 de setembro de 2021

O inglês Clive Marles Sinclair nasceu de uma família de engenheiros. Seu avô foi engenheiro, assim como o seu pai. Com um talento natural pela Matemática e um forte interesse em eletrônica, ele se tornaria uma página importante da popularização da computação em diversas partes do mundo, construindo um legado que se perpetuará por anos […]

A cibersegurança por trás das vacinas
Artigos
182 visualizações
Artigos
182 visualizações

A cibersegurança por trás das vacinas

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

Vacinas contra o coronavírus contam com aparato sofisticado de cibersegurança que bateu de frente com tentativa de ação de hackers.

Top 25 comandos do Git
Artigos
319 visualizações
Artigos
319 visualizações

Top 25 comandos do Git

Carlos L. A. da Silva - 28 de agosto de 2021

Git é uma mão na roda para source control, mas pode ficar melhor ainda conhecendo os comandos certos.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Dez anos de Kotlin: origens e futuro
Artigos
376 visualizações
376 visualizações

Dez anos de Kotlin: origens e futuro

Carlos L. A. da Silva - 20 de agosto de 2021
10 jogos que todo programador deveria conhecer
Artigos
691 visualizações
691 visualizações

10 jogos que todo programador deveria conhecer

Carlos L. A. da Silva - 1 de agosto de 2021