Je veux envelopper un texte qui est ajouté au TD. J'ai essayé avec style="word-wrap: break-word;" width="15%" . Mais l'enveloppement ne se produit pas. Est-il obligatoire de donner une largeur de 100% ? J'ai d'autres contrôles à afficher et je ne dispose que de 15% de largeur.
Réponses
Trop de publicités?
David Thomas
Points
111253
Il est possible que cela fonctionne, mais cela pourrait s'avérer un peu gênant à un moment donné dans le futur (si ce n'est pas 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 span est que, comme l'ont souligné d'autres personnes, une <td> s'étendra généralement pour s'adapter au contenu, alors qu'une <span> peut se voir attribuer une largeur déterminée - et s'attendre à ce qu'elle soit respectée. overflow: hidden est destiné à, mais pourrait ne pas, cacher ce qui causerait autrement le <td> à développer.
Je recommande d'utiliser le title de l'empan pour afficher le texte présent (ou coupé) dans la cellule visuelle, afin que le texte soit toujours disponible (et si vous ne voulez pas/besoin que les gens le voient, alors pourquoi l'avoir en premier lieu, je suppose...).
De même, si vous définissez une largeur pour le td {...} le td va s'étendre (ou potentiellement se contracter, 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 le balisage supplémentaire utilisé pour la présentation.
Elle
Points
146
Appliquez des classes à vos TD, appliquez les largeurs appropriées (n'oubliez pas de laisser l'un d'entre eux sans largeur afin qu'il prenne le reste de la largeur), puis appliquez les styles appropriés. Copiez et collez le code ci-dessous dans un éditeur et visualisez-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>
John
Points
87
En fait, l'habillage du texte se fait automatiquement dans les tableaux. La gaffe que les gens commettent lorsqu'ils testent est de supposer une longue chaîne de caractères comme "ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg" et de se plaindre qu'elle ne s'enroule pas. Il n'y a pratiquement aucun mot en anglais qui soit aussi long et même s'il y en a un, il y a une faible chance qu'il soit utilisé dans cette chaîne de caractères. <td> .
Essayez de tester avec des phrases comme "La contre-position est superstitieuse dans des circonstances prédéterminées".
- Réponses précédentes
- Plus de réponses
