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

As melhores extensões gratuitas para Visual Studio 2022
Artigos
46 visualizações
Artigos
46 visualizações

As melhores extensões gratuitas para Visual Studio 2022

Carlos L. A. da Silva - 20 de janeiro de 2022

Comece o ano com a melhor ferramenta para complementar seu trabalho!

Conhecendo Svelte
Artigos
239 visualizações
Artigos
239 visualizações

Conhecendo Svelte

Carlos L. A. da Silva - 6 de janeiro de 2022

Svelte, React ou Vue? O especialista Josh Collinsworth disserta sobre a solução em seus mínimos detalhes.

Petrobras abre concurso com 757 vagas de nível superior
Artigos
291 visualizações
Artigos
291 visualizações

Petrobras abre concurso com 757 vagas de nível superior

Redação - 30 de dezembro de 2021

Há vagas para cientistas de dados, engenheiros e analistas de sistemas entre outras carreiras. As inscrições permanecerão abertas até o dia 05 de janeiro de 2022.

Deixe um Comentário

Your email address will not be published.

Mais publicações

A história da imagem mais antiga da internet
Artigos
330 visualizações
330 visualizações

A história da imagem mais antiga da internet

Carlos L. A. da Silva - 28 de dezembro de 2021
Coreia do Sul no mapa dos jogos
Artigos
329 visualizações
329 visualizações

Coreia do Sul no mapa dos jogos

Carlos L. A. da Silva - 22 de dezembro de 2021
Rust é o futuro da infraestrutura JavaScript
Artigos
623 visualizações
623 visualizações

Rust é o futuro da infraestrutura JavaScript

Carlos L. A. da Silva - 6 de dezembro de 2021
Influenciadores digitais que não existem
Artigos
612 visualizações
612 visualizações

Influenciadores digitais que não existem

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