Como forçar uma quebra de linha em uma palavra longa em um DIV?

Ok, isso está realmente me confundindo. Eu tenho algum conteúdo dentro de uma div assim:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

No entanto, o conteúdo excede o DIV (conforme o esperado) porque a 'palavra' é muito longa.

Como forçar o navegador a 'quebrar' a palavra, quando necessário, para caber todo o conteúdo interno?

Usar word-wrap:break-word;

Até funciona no IE6, o que é uma surpresa agradável.

word-wrap: break-wordfoi substituído pelo overflow-wrap: break-word;que funciona em todos os navegadores modernos. O IE, sendo um navegador inoperante, sempre confiará no obsoleto e fora do padrão word-wrap.

Os usos existentes de word-wraphoje ainda funcionam, pois são um alias para overflow-wrapa especificação.

Não tenho certeza sobre a compatibilidade do navegador

word-break: break-all;

Além disso, você pode usar a <wbr>tag

<wbr>(quebra de palavra) significa: "O navegador pode inserir uma quebra de linha aqui, se desejar". O navegador não acha que uma quebra de linha é necessária e nada acontece.

Isso pode ser adicionado à resposta aceita para uma solução 'entre navegadores'.

Fontes:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Eu estava pesquisando o mesmo problema no Google e postei minha solução final AQUI . Também é relevante para esta questão.

Você pode fazer isso facilmente com uma div, fornecendo o estilo word-wrap: break-word(e também pode ser necessário definir sua largura).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

No entanto, para as tabelas , você também precisará aplicar: table-layout: fixed. Isso significa que as larguras das colunas não são mais fluidas, mas são definidas com base nas larguras das colunas apenas na primeira linha (ou através das larguras especificadas). Leia mais aqui .

Código de amostra:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​é a entidade HTML de um caractere unicode chamado espaço de largura zero (ZWSP), que é um caractere invisível que especifica uma oportunidade de quebra de linha. Da mesma forma, o objetivo do hífen é especificar uma oportunidade de quebra de linha dentro de um limite de palavras.

Verificou que o uso do seguinte funcionava na maioria dos principais navegadores (Chrome, IE, Safari iOS / OSX), exceto no Firefox (v50.0.2), ao usar o flexbox e confiar width: auto.

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

Nota: pode ser necessário adicionar prefixos de fornecedor do navegador se você não estiver usando um autoprefixer.

Outra coisa a observar é o uso de texto  para espaçamento, que pode causar quebras de linha no meio da palavra.

CSS word-wrap:break-word; , testado no FireFox 3.6.3

Resolvi meu problema com o código abaixo.

display: table-caption;

Retirar white-space: nowrap , se houver.

Implemento:

white-space: inherit;
word-break: break-word;

O espaço em branco é preservado pelo navegador. O texto será quebrado quando necessário e nas quebras de linha

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Do MDN :

o overflow-wrap propriedade CSS especifica se o navegador deve ou não inserir quebras de linha em palavras para impedir que o texto ultrapasse sua caixa de conteúdo.

Ao contrário de word-break, overflow-wrapsó criará uma quebra se uma palavra inteira não puder ser colocada em sua própria linha sem transbordar.

Então você pode usar:

overflow-wrap: break-word;

Posso usar ?

Primeiro você deve identificar a largura do seu elemento. Por exemplo:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

de modo que quando o texto atingir a largura do elemento, ele será dividido em linhas.

Como mencionado na resposta de @ davidcondrey, não há apenas o ZWSP, mas também o SHY ­ ­que pode ser usado em palavras muito longas e construídas (pense alemão ou holandês) que precisam ser quebradas no local que você deseja. Invisível, mas fornece um hífen no momento necessário, mantendo assim a palavra conectada e a linha preenchida ao máximo.

Dessa forma, a palavra luchthavenpolitieagent pode ser notada como a lucht­haven­politie­agentque fornece partes mais longas do que as sílabas da palavra.
Embora eu nunca tenha lido nada oficial sobre o assunto, esses hífens suaves conseguem obter prioridade mais alta nos navegadores do que os hífens oficiais nas únicas palavras da construção ( se houver alguma extensão para isso).
Na prática, nenhum navegador é capaz de quebrar uma palavra tão longa e construída por si só; em telas menores, resultando em uma nova linha para ela ou, em alguns casos, até em uma linha de uma palavra (como quando duas dessas palavras construídas são seguidas).

FYI: é holandês para policial do aeroporto

quebra de palavra: normal parece melhor usar do que quebra de palavra: quebra de palavra porque quebra de quebra de palavras inicial como EN

word-break: normal

Faça isso:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

apenas tente isso no nosso estilo

white-space: normal;