Quebra de linha em uma tabela HTML

Eu tenho usado word-wrap: break-wordpara quebrar o texto em divs e spans. No entanto, parece não funcionar nas células da tabela. Eu tenho uma tabela definida como width:100%, com uma linha e duas colunas. O texto nas colunas, embora com o estilo acima word-wrap, não quebra. Faz com que o texto ultrapasse os limites da célula. Isso acontece no Firefox, Google Chrome e Internet Explorer.

Aqui está a aparência da fonte:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

A palavra longa acima é maior que os limites da minha página, mas não quebra com o HTML acima. Eu tentei as sugestões abaixo de adicionar text-wrap:suppresse text-wrap:normal, mas também não ajudaram.

O seguinte funciona para mim no Internet Explorer. Observe a adição do table-layout:fixedatributo CSS

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

<td style="word-break:break-all;">longtextwithoutspace</td>

ou

<span style="word-break:break-all;">longtextwithoutspace</span>

Um tiro no escuro, mas verifique com o Firebug (ou similar) que você não está herdando acidentalmente a seguinte regra:

white-space:nowrap;

Isso pode substituir seu comportamento de quebra de linha especificado.

Acontece que não há uma boa maneira de fazer isso. O mais próximo que cheguei foi adicionar "overflow: hidden;" para a div ao redor da mesa e perdendo o texto. A solução real parece ser abandonar a mesa. Usando divs e posicionamento relativo, consegui o mesmo efeito, menos o legado de<table>

ATUALIZAÇÃO DE 2015: Isto é para pessoas como eu que querem esta resposta. Após 6 anos, isso funciona, obrigado a todos os colaboradores.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Como mencionado, colocar o texto divquase funciona. Você apenas precisa especificar o widthde div, o que é bom para layouts estáticos.

Isso funciona no FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Solução alternativa que usa overflow-wrap e funciona bem com layout de tabela normal + largura da tabela 100%

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Benefícios:

• Usa em overflow-wrap:break-wordvez de word-break:break-all. O que é melhor porque ele tenta quebrar primeiro os espaços e corta a palavra apenas se a palavra for maior que seu contêiner.
• Não é table-layout:fixednecessário. Use seu dimensionamento automático regular.
• Não é necessário definir fixo widthou fixo max-widthem pixels. Defina %o pai, se necessário.

Testado em FF57, Chrome62, IE11, Safari11

Mude seu código

word-wrap: break-word;

para

word-break:break-all;

Exemplo

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Problema com

<td style="word-break:break-all;">longtextwithoutspace</td>

é que não funcionará tão bem quando o texto tiver alguns espaços, por exemplo

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Se a palavra andthenlongerwithoutspacescouber na célula da tabela em uma linha, mas long text with andthenlongerwithoutspacesnão, a palavra longa será dividida em duas, em vez de ser quebrada.

Solução alternativa: insira U + 200B ( ZWSP ), U + 00AD ( hífen suave ) ou U + 200C ( ZWNJ ) em cada palavra longa após cada, digamos, 20 caracteres (no entanto, consulte o aviso abaixo):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Aviso : a inserção de caracteres adicionais de tamanho zero não afeta a leitura. No entanto, isso afeta o texto copiado na área de transferência (é claro que esses caracteres também são copiados). Se o texto da área de transferência for usado posteriormente em alguma função de pesquisa no aplicativo Web ... a pesquisa será interrompida. Embora essa solução possa ser vista em alguns aplicativos da web conhecidos, evite se possível.

Aviso : ao inserir caracteres adicionais, você não deve separar vários pontos de código no grafema. Consulte https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries para obter mais informações.

Confira esta demonstração

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Aqui está o link para ler

Testado no IE 8 e Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Isso faz com que a tabela caiba na largura da página e cada coluna ocupe 50% da largura.

Se você preferir que a primeira coluna ocupe mais da página, adicione a width: 80%ao tdexemplo a seguir, substituindo 80% pela porcentagem de sua escolha.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

A única coisa que precisa ser feita é adicionar largura ao interior <td>ou ao <div>interior, <td>dependendo do layout que você deseja obter.

por exemplo:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

ou

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

A resposta que ganhou a recompensa está correta, mas não funcionará se a primeira linha da tabela tiver uma célula mesclada / unida (todas as células têm largura igual).

Nesse caso, você deve usar as tags colgroupe colpara exibi-lo corretamente:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Parece que você precisa definir word-wrap:break-word;um elemento de bloco ( div), com largura (não relativa) especificada. Ex:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

ou usando de word-break:break-allacordo com a sugestão de Abhishek Simon.

Isso funciona para mim:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

E o atributo da tabela é:

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

</style>

Se você não precisar de uma borda da tabela, aplique o seguinte:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Encontrei uma solução que parece funcionar no Firefox, Google Chrome e Internet Explorer 7-9. Para fazer um layout de tabela de duas colunas com texto longo de um lado. Eu procurei por todo o problema semelhante, e o que funcionou em um navegador quebrou o outro, ou adicionar mais tags a uma tabela parece uma codificação incorreta.

Eu não usei uma tabela para isso. DL DT DD para o resgate. Pelo menos para corrigir um layout de duas colunas, isso é basicamente uma configuração de glossário / dicionário / significado de palavras.

E algum estilo genérico.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Usando quebra de linha flutuante e margem esquerda, consegui exatamente o que precisava. Apenas pensei em compartilhar isso com outras pessoas, talvez isso ajude alguém com um layout de estilo de definição de duas colunas, com problemas para conseguir que as palavras sejam agrupadas.

Tentei usar quebra de linha na célula da tabela, mas funcionou apenas no Internet Explorer 9 (e no Firefox e Google Chrome, é claro), principalmente tentando corrigir o navegador Internet Explorer quebrado aqui.

As tabelas são agrupadas por padrão, portanto, verifique se a exibição das células da tabela é table-cell:

td {
   display: table-cell;
}

style = "layout da tabela: fixo; largura: 98%; quebra de linha: quebra de palavra"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Demo - http://jsfiddle.net/Ne4BR/749/

Isso funcionou muito bem para mim. Eu tinha links longos que levariam a tabela a exceder 100% nos navegadores da web. Testado no IE, Chrome, Android e Safari.

Uma solução que funciona com o Google Chrome e Firefox (não testada no Internet Explorer) é definir display: table-cellcomo um elemento de bloco.

Você pode tentar isso se for adequado ...

Coloque uma área de texto dentro do seu td e desative-a com a cor de fundo branca e defina seu número de linhas.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>