Envelopper le texte dans la balise <td>

Je veux envelopper du texte qui est ajouté à un <td>élément. J'ai essayé avec style="word-wrap: break-word;" width="15%". Mais ce n'est pas envelopper le texte. Est-il obligatoire de lui donner une largeur de 100%? J'ai d'autres commandes à afficher, donc seulement 15% de largeur est disponible.

Pour envelopper du texte TD

Premier style de table

table{
    table-layout: fixed;
}

puis réglez le style TD

td{
    word-wrap:break-word
}

Les tableaux HTML prennent en charge un style css «table-layout: fixed» qui empêche l'agent utilisateur d'adapter les largeurs de colonne à leur contenu. Vous voudrez peut-être l'utiliser.

Je crois que vous avez rencontré le piège 22 des tableaux. Les tableaux sont parfaits pour envelopper le contenu dans une structure tabulaire et ils font un excellent travail "d'étirement" pour répondre aux besoins du contenu qu'ils contiennent.

Par défaut, les cellules du tableau s'étirent pour s'adapter au contenu ... ainsi votre texte ne fait que l'élargir.

Il y a quelques solutions.

1.) Vous pouvez essayer de définir une largeur maximale sur le TD.

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

2.) Vous pouvez essayer de placer votre texte dans un élément d'habillage (par exemple, une étendue) et y définir des contraintes.

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

Sachez cependant que les anciennes versions d'IE ne prennent pas en charge la largeur min / max.

Étant donné que IE ne prend pas en charge nativement max-width, vous devrez ajouter un hack si vous voulez le forcer. Il y a plusieurs façons d'ajouter un hack, c'est juste une.

Au chargement de la page, pour IE6 uniquement, obtenez la largeur rendue du tableau (en pixels), puis obtenez 15% de celle-ci et appliquez-la comme largeur au premier TD de cette colonne (ou TH si vous avez des en-têtes) à nouveau, en pixels .

table-layout:fixedrésoudra le problème de la cellule en expansion, mais en créera une nouvelle. IE masquera par défaut le débordement mais Mozilla le rendra en dehors de la boîte.

Une autre solution serait d'utiliser: 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édits à http://www.blakems.com/archives/000077.html

Cela a fonctionné pour moi avec certains frameworks CSS (Material Design Lite [MDL]).

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

td {
  word-wrap: break-word;
}

l'utiliser word-breakpeut être utilisé sans style tablepourtable-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>

Cela fonctionne vraiment bien:

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

Vous pouvez utiliser la même largeur pour tous vos <div, ou ajuster la largeur dans chaque cas pour couper votre texte où vous le souhaitez.

De cette façon, vous n'avez pas à vous tromper avec des largeurs de table fixes ou des css complexes.

J'ai eu certains de mes tds avec:

white-space: pre;

Cela a résolu le problème pour moi:

white-space: pre-wrap;

Pour que la largeur de la cellule soit exactement la même que le mot le plus long du texte, définissez simplement la largeur de la cellule sur 1px

c'est à dire

td {
  width: 1px;
}

C'est expérimental et j'en suis venu à le savoir en faisant des essais et des erreurs

Violon en direct: http://jsfiddle.net/harshjv/5e2oLL8L/2/

Il est possible que cela fonctionne, mais cela pourrait s'avérer un peu gênant à un moment donné dans le futur (sinon immédiatement).

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

La raison d'être de la spanest que, comme l'ont souligné d'autres, a <td>se développera généralement pour s'adapter au contenu, alors que a <span>peut être donné - et devrait conserver - une largeur définie; le overflow: hiddenest destiné à masquer, mais ne pourrait pas, ce qui causerait autrement<td> expansion du.

Je recommanderais d'utiliser la titlepropriété de la durée pour afficher le texte présent (ou découpé) dans la cellule visuelle, afin que le texte soit toujours disponible (et si vous ne voulez pas / avez besoin que les gens le voient, alors pourquoi l'avoir en premier lieu, je suppose ...).

De plus, si vous définissez une largeur pour que td {...}le td s'agrandisse (ou se contracte potentiellement, mais j'en doute) pour remplir sa largeur implicite (comme je le vois cela semble être table-width/number-of-cells), une largeur de table spécifiée ne semble pas créer le même problème.

L'inconvénient est un balisage supplémentaire utilisé pour la présentation.

En fait, l'habillage du texte se produit automatiquement dans les tableaux. La maladresse que les gens commettent lors des tests est de supposer hypothétiquement une longue chaîne comme "ggggggggggggggggggggggggggggggggggggggggggggggg" et se plaindre qu'elle ne s'enroule pas. Pratiquement, il n'y a pas de mot en anglais qui soit aussi long et même s'il y en a, il y a une faible chance qu'il soit utilisé à l'intérieur <td>.

Essayez de tester avec des phrases comme «La contre-position est superstitieuse dans des circonstances prédéterminées».

Appliquez des classes à vos TD, appliquez les largeurs appropriées (n'oubliez pas de laisser l'une d'elles sans largeur pour qu'elle prenne le reste de la largeur), puis appliquez les styles appropriés. Copiez et collez le code ci-dessous dans un éditeur et affichez-le dans un navigateur pour le voir fonctionner.

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