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”.
Uma das alternativas para corrigir esse problema é usando a propriedade CSS overflow, com valor hidden para cortar o que exceder o espaço especificado.
#comentarios {
overflow: hidden
}
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:
#comentarios {
overflow-y: auto;
}
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:
#comentarios {
word-wrap: break-word;
}
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:
#comentarios {
word-wrap: break-word;
overflow-wrap: break-word;
}
