Quebrar textos longos automáticamente com CSS

Hoje vou falar de uma propriedade CSS raramente usado e extremamente útil, o word-wrap. Você pode forçar textos longos (sem espaços) à quebrar e ir para próxima linha especificando break-word na propriedade word-wrap. Por exemplo, você quer garantir que um texto não se extenda para fora de uma caixa e quebre o layout. Isso geralmente acontece quando você tem uma URL longa na lista de comentários. Word-wrap é suportado por IE 5.5+, Firefox 3.5+, e WebKit browsers como Chrome e Safari.

Abaixo vai um exemplo de dois divs, um com a propriedade word-wrap: normal, e outro com word-wrap: break-word. Caso seu navegador veja os dois textos ultrapassando as bordas dos divs, ele não está ultrapassado e não suporta esta propriedade.

.break-word {
word-wrap: break-word;
}

Sem break-word

http://www.webdesignerwall.com_title_with_a_long_url_continue_here

Com break-word

http://www.webdesignerwall.com_title_with_a_long_url_continue_here

Espero que tenham gostado desta dica