Envelopper le texte dans la balise <td>


136

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.


1
Quel HTML utilisez-vous? est-ce <td> du texte ... </td> ou votre TD contient-il un <p> ou un <span>? Aussi, quand vous dites qu'il n'est pas enveloppant, je suppose que vous voyez le TD se développer en largeur lorsque le texte est plus long que "15%" de la largeur des tableaux?
scunliffe

Mon code HTML contient du <td> texte dynamique .. </td> et ce que vous pensez de l'expansion TD est tout à fait correct.

Réponses:


221

Pour envelopper du texte TD

Premier style de table

table{
    table-layout: fixed;
}

puis réglez le style TD

td{
    word-wrap:break-word
}

5
Je suppose que ce n'est pas accepté car il ne fonctionne pas dans chrome ... :-( Une solution pour le webkit?
MarcoS

4
A parfaitement fonctionné pour moi dans Chrome.
Alejandro Riedel

17
Intéressant ... Dans Chrome, j'ai dû utiliser white-space: normalle style td pour que l'emballage fonctionne (au lieu du word-wrap:break-word)
Jim

3
Je peux confirmer que j'ai eu la même expérience avec la réponse de Jim. Pour une raison quelconque, Chrome ne répond pas sans lewhite-space:normal;
petrosmm

1
À utiliser white-space: pre-wrapsi vous avez besoin de préserver les espaces blancs.
eicksl

47

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.


7
J'ai essayé cette solution, mais elle ne semble pas fonctionner dans Chrome. J'ai un tableau qui est rempli dynamiquement avec un lien hypertexte qui fait plus de deux fois la largeur de la cellule. 'table-layout: fixed' résout le problème de l'étirement du tableau, mais n'enveloppe pas le texte; au lieu de cela, il continue à s'étirer sur la droite de la page. Est-ce que je manque quelque chose?
VOIDHand

30

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 .


J'ai dans les deux sens. Mais pas capable d'encapsuler le texte. J'utilise IE6.0

1
ah, IE6. Cela ajoute de la complexité. Je vais réviser ma réponse avec un hack IE6.
scunliffe

11

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>


9

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

8

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>


3

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.


1
Vous auriez peut-être voulu utiliser CSS à la place, mais les styles en ligne sont généralement évités dans le HTML moderne, surtout si vous répétez les mêmes styles encore et encore pour chaque div copié.
TankorSmash

3

J'ai eu certains de mes tds avec:

white-space: pre;

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

white-space: pre-wrap;

2

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/


1

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.


1

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


C'est correct. Je ne comprends pas pourquoi les gens suggèrent d'utiliser "white-space: nowrap" car cela fera exactement le contraire de ce que veut l'OP.
mluisbrown

29
corriger aucun mot en anglais qui est aussi long mais supposons que j'affiche un chemin de fichier, qui va être continu et très long.
krisp

2
..Ou une longue liste de nombres séparés par des virgules, par exemple, qui malheureusement n'ont pas d'espace.
Aditya Sanghi le

4
.. Ou un nom de domaine long pouvant aller jusqu'à 63 caractères (extension et www exclus) http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
Brainfeeder

J'essaye de résoudre ce problème lorsque le "mot" est une URL très longue. Le commentaire ci-dessus avec l'exemple "ggggggggggggggggggggggggggggggggggggggggggggggg" ne prend pas en compte les URL longues.
geekandglitter

0

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>

Je crois que le PO, sans le déclarer explicitement, a des problèmes avec le contenu dynamique non-espaces. Dans ce cas, la solution ci-dessus ne fonctionnera pas - jsfiddle.net/qZrFW
user66001

-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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.