0 Compartilhamentos 4 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.

Carregando...

Você pode se interessar

Como começar a programar
Artigos
10 visualizações
Artigos
10 visualizações

Como começar a programar

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

Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.

Como cancelar qualquer conta online para sempre
Dicas
15 visualizações
Dicas
15 visualizações

Como cancelar qualquer conta online para sempre

Carlos L. A. da Silva - 30 de dezembro de 2020

Que tal fazer uma limpeza nas suas contas inativas ou finalmente largar aquela rede social que só dá desgosto?

Retrospectiva (positiva) de 2020
Artigos
18 visualizações
Artigos
18 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020

Nem só de coronavírus foi marcado o ano que se encerra e alguns momentos positivos se perderam em meio a tanta tragédia.

Deixe um Comentário

Your email address will not be published.

Mais publicações

O que seria internet quântica?
Artigos
18 visualizações
18 visualizações

O que seria internet quântica?

Carlos L. A. da Silva - 23 de dezembro de 2020
Como fazer uma árvore de Natal… com CSS!
Dicas
25 visualizações
25 visualizações

Como fazer uma árvore de Natal… com CSS!

Carlos L. A. da Silva - 21 de dezembro de 2020
Promoções de Jogos do Final de Semana (18/12) – Edição Natalina
Notícias
30 visualizações
30 visualizações

Promoções de Jogos do Final de Semana (18/12) – Edição Natalina

Carlos L. A. da Silva - 18 de dezembro de 2020
10 mitos sobre sua carreira em desenvolvimento
Artigos
25 visualizações
25 visualizações

10 mitos sobre sua carreira em desenvolvimento

Carlos L. A. da Silva - 16 de dezembro de 2020