Existe uma maneira de quebrar palavras longas em uma div?

173

Sei que o Internet Explorer tem um estilo de quebra de linha, mas gostaria de saber se existe um método entre navegadores para fazer texto em uma div.

De preferência CSS, mas trechos de JavaScript também funcionariam bem.

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

css html word-wrap Rutherford
fonte
7
A quebra de linha acontece por padrão. Você quer dizer quebra automática quando não há palavras separadas?
Quentin

Respostas:

313

Lendo o comentário original, rutherford está procurando uma maneira entre navegadores para quebrar texto ininterrupto (inferido pelo uso de quebra de linha para o IE, projetado para quebrar seqüências 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: testei apenas no FireFox e IE)

Aaron Bennett
fonte
Postagem antiga, mas não parece render espaços quando o IE está no modo peculiar.
21412 Jeremy
2
Estou usando o Firefox 24.6.0, e foi o word-wrap: break-wordque realmente funcionou.
user545424
3
Word-wrap: break-wordembora criado por Microsoft está agora faz parte do padrão CSS 3 e é o que faz o truque :-)
Pascal_dher
38

A maioria das respostas anteriores 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:

Paul Zahra
fonte
2
obrigado! esta é a única resposta que funcionou (palavra-break: break-tudo; é o que funcionou para mim)
Danice
12

A solução de Aaron Bennet está funcionando perfeitamente para mim, mas eu tive que remover esta linha do seu código -> white-space: -pre-wrap;porque estava dando um erro, então o código de trabalho final é 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

Hugo
fonte
1
Aaron Bennett mencionou esta mesma resposta 2 anos antes de você. o que você fez aqui não agrega valor.
AaA
6
Oi, como você pode ver se você lê as duas respostas novamente, o que estou dizendo é que a solução de Aaron está boa, mas eu estava recebendo um erro em uma das linhas que ele escreveu, então mudei para a solução que funcionava para mim. Talvez eu devesse ter comentário em sua resposta, eu sei que, desculpe & graças
Hugo
Eu tinha para adicionar esta "white-space: -Pré-wrap" e funcionou :)
Ravi Khambhati
0

Como David menciona, DIVs fazer palavras envoltório por padrão.

Se você está se referindo a longas seqüências de texto sem espaços, o que faço é processar a sequência do servidor e inserir espaços vazios:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Não é exato, pois há problemas com o tamanho da fonte e outras coisas. A opção de extensão funciona se o contêiner tiver tamanho variável. Se for um contêiner de largura fixa, basta seguir em frente e inserir quebras de linha.

DA.
fonte
@ TomHert isso é realmente estranho. Embora, bem, IE. Isso nunca funciona. Dito isto, isso foi publicado há 5 anos. O CSS3 agora tem algumas opções melhores de quebra de linha que o IE pode acomodar developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA.
Sim, eu sei, eu estava chocado com a simplicidade desta solução que eu tinha que tentou fazê-lo :)
Tom Hert
0

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

Slevin
fonte
Tente definir 10px de largura ... e, em seguida, usar uma palavra mais do que 10px
Paul Zahra