HTML TD wrap text

Question

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.

Answer 1

Pour envelopper le texte du TD

Premier style de table

table{
    table-layout: fixed;
}

puis définir le style TD

td{
    word-wrap:break-word
}

Answer 2

Les tableaux HTML prennent en charge un style css "table-layout:fixed" qui empêche l'agent utilisateur d'adapter la largeur des colonnes à leur contenu. Vous pourriez vouloir l'utiliser.

Answer 3

Je crois que vous avez rencontré le piège des tables. Les tableaux sont parfaits pour regrouper du contenu dans une structure tabulaire et ils s'adaptent parfaitement aux besoins du contenu qu'ils contiennent.

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

Il y a quelques solutions.

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

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

2.) Vous pouvez essayer de placer votre texte dans un élément enveloppant (par exemple, un span) et de lui imposer des contraintes.

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

Sachez toutefois que les anciennes versions d'IE ne prennent pas en charge les largeurs min/max.

Étant donné qu'IE ne prend pas en charge la largeur maximale en mode natif, vous devrez ajouter un hack si vous voulez le forcer à le faire. Il y a plusieurs façons d'ajouter un hack, celle-ci n'en est qu'une.

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

Answer 4

table-layout:fixed résoudra le problème de la cellule en expansion, mais en créera une nouvelle. Par défaut, IE masquera 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>

Answer 5

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

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

Crédits pour http://www.blakems.com/archives/000077.html