0 Compartilhamentos 222 Views 1 Comments

Evitando o perigo de palavras muito longas em caixas de comentários

Você cria aquele layout todo bacana para seu site. Próximo ao conteúdo, você coloca uma caixa onde os visitantes poderão entrar com comentários. Então, aparece um usuário mal-intencionado e escreve uma palavra interminável, sem qualquer tipo de espaço no meio que possa servir para quebrar a linha. Resultado? A palavra gigantesca ultrapassa o espaço da área de comentário e invade o conteúdo ao lado.

A verdade é que todo o input inserido por um usuário precisa ser filtrado, analisado e limpo antes de ser publicado. Administradores de bancos de dados conhecem muito bem o perigo de um SQL Injection. E Webdesigners conhecem muito bem o risco da “caixa estourada”.

error

Uma das alternativas para corrigir esse problema é usando a propriedade CSS overflow, com valor hidden para cortar o que exceder o espaço especificado.

error-02

Mas esta abordagem pode apagar conteúdo válido, interrompendo palavras legítimas ou uma URL no meio da caminho. Outra alternativa seria mudar o valor do overflow para auto, criando uma barra de rolagem quando necessário. Melhor ainda seria usar a propriedade overflow-y, para que a barra de rolagem apareça apenas na horizontal:

error-03

Ainda que esta solução permita ver todo o comentário inserido pelo usuário, barras horizontais podem ser deselegantes. Não seria melhor se a própria palavra interminável quebrasse magicamente para a linha de baixo? Isso é possível com a propriedade word-wrap com o valor word-break:

error-04

Esta propriedade foi introduzida pela Microsoft no Internet Explorer 5.5 e depois adotada em todos os navegadores. Então, seu suporte é amplo e irrestrito. Com o CSS3, a propriedade foi substituída por overflow-wrap, mas ainda não tem um suporte universal. Para evitar dores de cabeça futuras, por enquanto é sugerido usar as duas sintaxes no mesmo bloco CSS:

Você pode se interessar

5 fatos que todo departamento de TI pode aprender com Fortnite
Artigos
7 visualizações
Artigos
7 visualizações

5 fatos que todo departamento de TI pode aprender com Fortnite

Carlos L. A. da Silva - 1 de julho de 2019

O Departamento de TI de uma empresa não é apenas um lugar onde os caras jogam Fortnite o dia inteiro. Grandes desastres podem vir de lá também...

Promoções de Jogos do Final de Semana (28/06)
Notícias
8 visualizações
Notícias
8 visualizações

Promoções de Jogos do Final de Semana (28/06)

Carlos L. A. da Silva - 28 de junho de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

FIREBASE Database na Prática com JAVASCRIPT PURO // Mão no Código #14
Vídeos
1,655 compartilhamentos6,806 visualizações
Vídeos
1,655 compartilhamentos6,806 visualizações

FIREBASE Database na Prática com JAVASCRIPT PURO // Mão no Código #14

Thais Cardoso de Mello - 27 de junho de 2019

Vamos mostrar na prática pra vocês como é SIMPLES DEMAIS manipular o Realtime Database (noSQL) do Firebase usando JavaScript puro e o SDK "marrrravilhoso" que o pessoal do Google Cloud criou.

One Response

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como baixar o novo Windows Terminal
Dicas
18 visualizações
18 visualizações

Como baixar o novo Windows Terminal

Carlos L. A. da Silva - 26 de junho de 2019
Libra: o que sabemos sobre a criptomoeda do Facebook
Artigos
12 visualizações
12 visualizações

Libra: o que sabemos sobre a criptomoeda do Facebook

Carlos L. A. da Silva - 25 de junho de 2019
WebAssembly // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,810 visualizações
1,655 compartilhamentos6,810 visualizações

WebAssembly // Dicionário do Programador

Thais Cardoso de Mello - 24 de junho de 2019
Promoções de Jogos do Final de Semana (21/06)
Notícias
10 visualizações
10 visualizações

Promoções de Jogos do Final de Semana (21/06)

Carlos L. A. da Silva - 21 de junho de 2019