paragraph - overflow line break css



Existe uma maneira de enrolar palavras longas em uma div? (4)

Eu sei que o Internet Explorer tem um estilo de quebra automática de palavras, mas eu gostaria de saber se existe um método cross-browser para fazer isso em um texto em um div.

De preferência CSS, mas snippets JavaScript funcionaria bem também.

edit: Sim, referindo-se a longas cordas, elogios pessoal!


Answer #1

A maior parte da resposta anterior não funcionou para mim no Firefox 38.0.5. Isso fez ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Documentação:


Answer #2

A solução de Aaron Bennet está funcionando perfeitamente para mim, mas eu tive que remover essa linha de seu código -> white-space: -pre-wrap; beacause estava dando um erro, então o código final de trabalho é o seguinte:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Muito obrigado


Answer #3

Lendo o comentário original, rutherford está procurando uma maneira entre navegadores para encapsular o texto ininterrupto (inferido por seu uso do word-wrap para o IE, projetado para quebrar seqüências de caracteres ininterruptas).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Eu usei essa classe um pouco agora e funciona como um encanto. (nota: eu testei apenas no FireFox e IE)


Answer #4

Você pode tentar especificar uma largura para o div, seja em pixels, porcentagens ou ems, e nesse ponto, o div permanecerá nessa largura e o texto será quebrado automaticamente dentro do div.





word-wrap