CSS - Evitar as páginas deformadas

Dezembro 2016


Independentemente de um CSS, mal conhecido, pode acontecer que uma página web se deforma simplesmente por causa de seu conteúdo: o texto o texto que sai das margens por exemplo.

Existem algumas soluções muito simples para isso.

Mascarar aquilo que ultrapassa


Se a caixa que contém é muito pequena e que o conteúdo ultrapassa, pode-se utilizar o seguinte código para esconder tudo aquilo que sai dos limites :
contêiner{    
      overflow: hidden:    
}

Enviar o que sobra em nova linha


O primeiro método faz o papel de uma máscara e deixa invisível o que ultrapassa. Mas, isso nem sempre é prático. Se a deformação da página é devido simplesmente ao texto (uma palavra muito longa que alarga o bloco contêiner), pode-se cortar as palavras em dois:
contêiner {    
       word-wrap: break-word;    
}    


Resultado :

Veja também

Artigo original publicado por . Tradução feita por ninha25. Última modificação: 26 de outubro de 2010 às 07:18 por ninha25.
Este documento, intitulado 'CSS - Evitar as páginas deformadas', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.