Word-wrap em CSS

Por vezes uma linha longa de texto recusa-se a ficar nos limites de um contentor, acabando por o ultrapassar, ou seja, não faz "word-wrap". Infelizmente, não há uma solução universal em CSS que funcione em todos os browsers, incluindo versões mais antigas. É preciso aplicar várias declarações proprietárias para corrigir isto.

.wordwrap
{
    white-space: pre; /* CSS2 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP printers */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
    _white-space: pre; /* IE hack to re-specify in addition to word-wrap */
}

Grande parte deste código é de Ian Hickson - Lim Chee Aun escreveu sobre isto em Whitespace and generated content, explicando as particularidades deste problema. Também podem encontrar mais informação em Pre-wrap alternatives.

Nuno Freitas
Publicado por Nuno Freitas em 07 julho, 2011

Artigos relacionados