Quebra de linha em uma tabela HTML


566

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.


adicione hífen rígido. <tr> <td style = "quebra automática de texto: normal; quebra automática de palavras: quebra de palavras"> Esta é uma apresentação. </td> </tr>
adatapost

Infelizmente, o texto é proveniente de conteúdo gerado pelo usuário. É claro que eu poderia pré-processar e adicionar o hífen, mas esperava que houvesse uma maneira melhor.
psychotik

Peço desculpas por usar a palavra 'hífen'. Em HTML, o hífen simples é representado pelo caractere "-" (& # 45; ou & # x2D;). O hífen suave é representado pela referência da entidade do caractere & shy; (& # 173; ou & # xAd;)
adatapost

Você está realmente usando <code>break-wor<em>k</em> </code>? Talvez isso possa ter algo a ver com isso.
Ms2ger 11/08/09

1
Se você está aqui, você pode querer olhar também para white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space
Tom Prats

Respostas:


624

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>


@ womac sim, às vezes eu só tenho que ignorar os erros do VS2010 sobre HTML / CSS, se eu sei que funcionará no navegador.
Marc Stober

2
@marc !! cara, muito obrigado por isso. Fui encarregado de criar uma versão móvel de um site cliente que usa tabelas e estava tendo problemas para fazer isso funcionar! layout da tabela: corrigido, deu certo!
depuração

17
Isso torna as outras colunas muito amplas.
Clément

2
Certifique-se de ler developer.mozilla.org/en-US/docs/Web/CSS/table-layout As larguras das tabelas e colunas são definidas pelas larguras dos elementos da tabela e da coluna ou pela largura da primeira linha de células. As células nas linhas subseqüentes não afetam as larguras das colunas. Parece que isso também é bom para o desempenho.
quer

2
@ Clément, veja a resposta de Indrek abaixo sobre <colgroup>isso, consertou isso para mim.
andrewtweber

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

ou

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

Pode confirmar que a abordagem do Pratik também funciona no Safari no iOS (iPhone).
Occulus

Para solucionar o problema com algumas palavras curtas e longas, é possível pré-processar o texto e agrupar apenas palavras longas (digamos,> 40 caracteres) no <span>.
Nornagon

9
este não suportam pelo Firefox, Opera
meotimdihia

5
isso não preferencialmente quebra em caracteres que não sejam palavras (como, se eu tivesse uma série de palavras mais curtas separadas por espaços, elas sempre corriam as palavras até a linha e depois dividiam a última palavra pela metade). Word-wrapvai quebrar palavras apenas quando necessário
Hashbrown

Essa abordagem é melhor porque não exige table-layout: fixed;.
fácil

125

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.


Isto é o que foi herdado e quebrou a palavra de embrulho para mim
Shane Lee

@ RickGrundy O que você muda se tiver esse problema?
Cokeude

7
@cokedude Estou muito atrasado aqui, mas éwhite-space:normal;
Beer Me

46

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%;
}

29

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>

2
Você pode adicionar min-width: 100%junto widthpara garantir que a divcélula inteira ocupe.
user1091949

Quero fazer quebra de linha com vírgula (,). Like Long,Long,Long,Long,Long. Quero quebrar isso depois de qualquer vírgula (,).
Karthikeyan

20

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


Embora esse hack pareça realmente funcionar em todos os navegadores, tenha cuidado que a especificação CSS não oferece garantia disso. Por w3.org/TR/CSS21/visudet.html#propdef-max-width , "o efeito de 'min-width' e 'max-width' em tabelas, tabelas embutidas, células de tabela, colunas de tabela e grupos de colunas é indefinido " .
Mark Amery

17

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>


-1; isso faz com que o navegador ignore completamente as quebras de palavras e as que estão no meio das palavras, mesmo que não seja necessário. Isso raramente é um comportamento desejável e, presumivelmente, não é o comportamento que o OP queria, senão eles não teriam usado break-wordem primeiro lugar.
Mark Amery

16

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.


Talvez a saída disso seja um pouco melhor se, em palavras suficientemente longas, você inserir um hífen suave após cada caractere, para que o navegador possa quebrar a palavra de maneira confiável na borda direita do elemento que o contém.
Mark Amery

Embora essa seja uma solução viável, a sugestão aparentemente inócua para adicionar algo "depois de cada, digamos, 20º caractere" está repleta de traps, se você quiser fazê-lo programaticamente em seu servidor. A iteração sobre os caracteres de uma string Unicode é difícil na maioria das linguagens de programação. Na melhor das hipóteses , um idioma pode facilitar a iteração sobre pontos de código Unicode, mas não é necessariamente o que gostaríamos de chamar de "caracteres" (por exemplo, pode ser escrito como dois pontos de código). Provavelmente realmente queremos dizer "grafemas", mas não conheço nenhuma linguagem que torne trivial passar por cima delas.
Mark Amery

1
@ MarkAmery você está certo. No entanto, mesmo com ASCII simples, isso não é ótimo. Eu adicionei "avisos".
Piotr Findeisen

14

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


-1; A utilização break-allfará com que o navegador ignore completamente as quebras de palavras ao decidir onde colocar as quebras de linha, com o efeito de que, mesmo que seu celular contenha prosa normal sem palavras muito longas, você terminará com quebras de linha no meio das palavras. Isso geralmente é indesejável.
Mark Amery

10

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>

10

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>

1
Isso basicamente apenas repete o que a resposta do loungerdork já disse meses antes, sem adicionar nenhuma nova informação ou insight.
Mark Amery

Seu funcionou para mim
core114 ​​17/01

8

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>

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

1
-1 tanto pela falta de explicação quanto pela má solução. Colocar o conteúdo dentro de uma largura de pixel fixa pem uma célula da tabela que não tenha uma largura de pixel fixa quase certamente acabará com o ptransbordamento ou falha no preenchimento da célula da tabela.
Mark Amery

8

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.


5

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>

Como várias outras respostas, a parte principal aqui que faz o trabalho está sendo usada table-layout: fixed, mas já existe uma resposta muito mais antiga sugerindo isso, então essa resposta não adiciona nenhuma informação nova.
Mark Amery

4

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;
}

Já existe uma resposta muito mais antiga sugerindo o uso table-layout: fixed; este não adiciona nada de novo à página.
Mark Amery

4

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.


2

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;
}

-1; texto em qualquer elemento HTML é agrupado por padrão, não apenas tabelas. A sugestão aqui realmente não faz sentido.
Mark Amery

1

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.


Isso é basicamente uma duplicata como a resposta mais votada ; em ambos os casos, a solução se resume a "usar table-layout: fixed".
Mark Amery

0

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.


0

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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.