Quebrar texto na tag <td>

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.

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
}

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.

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 .

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>

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

Créditos para http://www.blakems.com/archives/000077.html

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

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>

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.

Eu tive alguns dos meus tds com:

white-space: pre;

Isso resolveu para mim:

white-space: pre-wrap;

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/

É 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.

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".

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>

<!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>