Como quebrar texto sem espaços em branco dentro de um <td>?

Eu usei:

word-break:break-all;
table-layout:fixed;

e o texto quebra no Chrome, mas não no Firefox.

Atualização: decidi mudar o design para que não precisasse do envoltório; tentar resolver uma correção / hack de CSS estava se mostrando muito frustrante e demorado.

Tente isto, penso que este trabalho vontade para algo como "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" produzirá

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Peguei meu exemplo em alguns sites diferentes no Google. Eu testei isso no ff 5.0, IE 8.0 e Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Use CSS3 word-wrap: break-word;. Também funciona em navegadores baseados em WebKit (Safari, Chrome).

Atualização : esqueci, o elemento em questão deve, entretanto, ser posicionado implícita ou explicitamente como elemento fixo ou exibido como elemento de bloco. Para células da tabela ( td), use display: inline-block;.

Para um layout automático de tabela, tente estilizar o td em questão combinando os atributos max-width e word-wrap.

Por exemplo: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Testado no Firefox 32, Chrome 37 e IE11.

Aqui está uma versão avançada do que o OP pediu.

Às vezes, o que acontece é que nosso cliente quer que demos '-' após a quebra de palavra até o final da linha.

Gostar

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

quebrar para

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Portanto, há uma nova propriedade CSS, se houver suporte, geralmente compatível com os navegadores mais recentes.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Estou usando este.

Espero que alguém tenha uma demanda como essa.

Você pode injetar manualmente espaços de largura zero (& # 8203;) para criar pontos de interrupção.

Defina uma largura de coluna para a tdtag.

Acho que esse é um problema antigo no Firefox, que remete ao Mozilla e ao Netscape. Aposto que você estava tendo problemas com a exibição de URLs longos. Acho que é um problema com o mecanismo de renderização, em vez de algo que você pode consertar com CSS, sem alguns hacks feios.

Faz sentido mudar o design.

Mas isso parecia promissor: http://hacks.mozilla.org/2009/06/word-wrap/

Estou usando o Angular para meu projeto e consegui resolver isso com um filtro simples:

Modelo:

<td>{{string | wordBreak}}</td>

Filtro:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

Você não pode ver, mas depois $1há um espaço invisível (obrigado @kingjeffrey pela dica), que permitiu quebras de palavras para células da tabela.

Uma maneira um tanto hackeada de fazer isso é processar o texto para adicionar espaço entre cada letra. Substitua os espaços por  Então use o atributo letter-spacing css para diminuir os espaços.

Eu sei, é um hack ... mas se nada mais funcionar, deve terminar sem problemas.