Quebrar texto na tag <td>

136

Eu quero quebrar algum texto que é adicionado a um <td>elemento. Eu tentei com style="word-wrap: break-word;" width="15%". Mas não está encapsulando o texto. É obrigatório fornecer 100% de largura? Como tenho outros controles para exibir, apenas 15% da largura está disponível.

zool
fonte
1
Qual HTML você está usando? é <td> algum texto ... </td> ou o seu TD contém um <p> ou <span>? Além disso, quando você diz que não está quebrando, presumo que você está vendo o TD expandir em largura quando o texto ultrapassa "15%" da largura das tabelas?
scunliffe 29/06/09
Meu HTML tem <td> texto dinâmico .. </td> e o que você presume sobre a expansão TD está absolutamente correto.

Respostas:

221

Para quebrar o texto TD

Estilo da tabela do primeiro conjunto

table{
    table-layout: fixed;
}

depois defina o TD Style

td{
    word-wrap:break-word
}
Jitender Mahlawat
fonte
5
Suponho que não está acceped porque ele não funciona no Chrome ... :-( Qualquer solução para webkit?
Marcos
4
Funcionou perfeitamente para mim no Chrome.
Alejandro Riedel
17
Interessante ... No Chrome, eu tive que usar white-space: normalno estilo td para obter o embrulho para o trabalho (em vez de a word-wrap:break-word)
Jim
3
Posso confirmar que tive a mesma experiência com a resposta de Jim. Por alguma razão, o Chrome não responde sem owhite-space:normal;
petrosmm
1
Use white-space: pre-wrapse você precisar preservar o espaço em branco.
eicksl
47

As tabelas HTML suportam um estilo css "layout da tabela: fixo" que impede que o agente do usuário adapte as larguras da coluna ao seu conteúdo. Você pode querer usá-lo.

Alsciende
fonte
7
Eu tentei esta solução, mas ela não parece estar funcionando no Chrome. Eu tenho uma tabela que está sendo preenchida dinamicamente com um hiperlink que tem mais do dobro da largura da célula. 'layout da tabela: fixo' resolve o problema com o alongamento da tabela, mas não quebra o texto; em vez disso, continua estendendo-se à direita da página. Estou esquecendo de algo?
precisa saber é o seguinte
30

Eu acredito que você encontrou o problema 22 das tabelas. As tabelas são ótimas para agrupar o conteúdo em uma estrutura tabular e fazem um trabalho maravilhoso de "esticar" para atender às necessidades do conteúdo que elas contêm.

Por padrão, as células da tabela se estendem para caber no conteúdo ... portanto, seu texto apenas o torna mais amplo.

Existem algumas soluções.

1.) Você pode tentar definir uma largura máxima no TD.

<td style="max-width:150px;">

2.) Você pode tentar colocar seu texto em um elemento de quebra automática (por exemplo, um espaço) e definir restrições nele.

<td><span style="max-width:150px;">Hello World...</span></td>

Esteja ciente de que as versões mais antigas do IE não suportam largura mínima / máxima.

Como o IE não suporta largura máxima nativamente, você precisará adicionar um hack, se quiser forçá-lo. Existem várias maneiras de adicionar um hack, este é apenas um.

No carregamento da página, apenas para o IE6, obtenha a largura renderizada da tabela (em pixels), obtenha 15% disso e aplique-a como a largura ao primeiro TD nessa coluna (ou TH se você tiver cabeçalhos) novamente, em pixels .

scunliffe
fonte
Eu tenho nos dois sentidos. Mas não é capaz de quebrar o texto. Estou usando o IE6.0
1
ah, ie6. Isso adiciona complexidade. Vou revisar minha resposta com um hack do IE6.
scunliffe
11

table-layout:fixedresolverá o problema da célula em expansão, mas criará um novo. Por padrão, o IE oculta o estouro, mas o Mozilla o processa fora da caixa.

Outra solução seria usar: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>
Costin
fonte
9

Isso funcionou para mim com algumas estruturas css (material design lite [MDL]).

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}
Tudo é muito
fonte
8

usar word-breakque pode ser usado sem styling tableparatable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}
<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

ewwink
fonte
3

Isso funciona muito bem:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

Você pode usar a mesma largura para todos os seus <div, ou ajustar a largura em cada caso para quebrar seu texto onde quiser.

Dessa forma, você não precisa se preocupar com larguras de tabelas fixas ou com css complexo.

Betty Mock
fonte
1
Você pode ter usado CSS, mas os estilos embutidos geralmente são evitados no HTML moderno, especialmente se você estiver repetindo os mesmos estilos várias vezes para cada div copiada.
TankorSmash
3

Eu tive alguns dos meus tds com:

white-space: pre;

Isso resolveu para mim:

white-space: pre-wrap;
MikeL
fonte
2

Para tornar a largura da célula exatamente igual à palavra mais longa do texto, apenas defina a largura da célula como 1px

ie

td {
  width: 1px;
}

Isso é experimental e eu vim a saber sobre isso ao tentar tentativa e erro

Violino ao vivo: http://jsfiddle.net/harshjv/5e2oLL8L/2/

Harsh Vakharia
fonte
1

É possível que isso funcione, mas pode ser um incômodo em algum momento no futuro (se não imediatamente).

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

A justificativa para spanisso é que, como apontado por outros, a <td>normalmente se expande para acomodar o conteúdo, enquanto a <span>pode ser dada - e espera-se manter - uma largura definida; o overflow: hiddenobjetivo é, mas não pode, ocultar o que de outra forma faria com que a <td>expansão se expandisse.

Eu recomendo usar a titlepropriedade span para mostrar o texto que está presente (ou recortado) na célula visual, para que o texto ainda esteja disponível (e se você não quiser / precisar que as pessoas o vejam, por que tê-lo em primeiro lugar, eu acho ...).

Além disso, se você definir uma largura para o td {...}td será expandido (ou potencialmente contraído, mas duvido) para preencher sua largura implícita (como eu acho que isso parece ser table-width/number-of-cells), uma largura de tabela especificada não parece criar o mesmo problema.

A desvantagem é a marcação adicional usada para apresentação.

David diz para restabelecer Monica
fonte
1

Na verdade, a disposição do texto acontece automaticamente nas tabelas. As pessoas TOLICE cometer durante o teste é assumir hipoteticamente uma longa seqüência como "ggggggggggggggggggggggggggggggggggggggggggggggg" e se queixam de que não quebra. Praticamente não há uma palavra em inglês que seja tão longa e, mesmo que exista, há uma pequena chance de que ela seja usada dentro dela <td>.

Tente testar com frases como "A contraposição é supersticiosa em circunstâncias predeterminadas".

John
fonte
Isto está certo. Não consigo entender por que as pessoas estão sugerindo o uso de "espaço em branco: agorarap", pois isso fará exatamente o oposto do que o OP deseja.
mluisbrown
29
não corrija nenhuma palavra em inglês que seja tão longa, mas suponha que eu esteja exibindo um caminho de arquivo, que será contínuo e muito longo.
Krisp
2
..Ou uma lista longa de números separados por vírgula, por exemplo, que infelizmente não têm espaços.
Aditya Sanghi
4
.. Ou um longo domainname que pode ir até 63 caracteres (extensão e www excluídos) http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
Brainfeeder
Estou tentando resolver esse problema quando a "palavra" é um URL muito longo. O comentário acima com o exemplo "gggggggggggggggggggggggggggggggggggggggggggggggggggggg" não está levando em consideração os URLs longos.
Geekandglitter #
0

Aplique classes aos seus TDs, aplique as larguras apropriadas (lembre-se de deixar uma delas sem largura para que assuma o restante da largura) e, em seguida, aplique os estilos apropriados. Copie e cole o código abaixo em um editor e visualize-o em um navegador para vê-lo funcionar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>
Elle
fonte
Acredito que o OP, embora não o afirme explicitamente, está tendo problemas com a quebra de conteúdo dinâmico que não seja um espaço. Nesse caso, a solução acima não funcionará - jsfiddle.net/qZrFW
user66001 18/13
-1
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>
Md Nazrul Islam
fonte