Le word-wrap dans un tableau HTML

Question

J'ai utilisé word-wrap: break-word pour envelopper le texte dans div et span s. Cependant, cela ne semble pas fonctionner dans les cellules de tableau. J'ai un tableau réglé sur width:100% avec une ligne et deux colonnes. Le texte en colonnes, bien qu'il soit stylisé avec le style ci-dessus word-wrap n'est pas enveloppée. Le texte dépasse alors les limites de la cellule. Cela se produit sur Firefox, Google Chrome et Internet Explorer.

Voici à quoi ressemble la source :

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Le long mot ci-dessus est plus grand que les limites de ma page, mais il n'y a pas de rupture avec le HTML ci-dessus. J'ai essayé les suggestions ci-dessous d'ajouter text-wrap:suppress y text-wrap:normal mais aucun n'a aidé.

Answer 1

Ce qui suit fonctionne pour moi dans Internet Explorer. Notez l'ajout de l'élément table-layout:fixed Attribut CSS

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

Answer 2

<td style="word-break:break-all;">longtextwithoutspace</td>

ou

<span style="word-break:break-all;">longtextwithoutspace</span>

Answer 3

C'est peu probable, mais vérifiez avec Firebug (ou similaire) que vous n'héritez pas accidentellement de la règle suivante :

white-space:nowrap;

Cela peut remplacer le comportement de retour à la ligne que vous avez spécifié.

Answer 4

Il s'avère qu'il n'y a pas de bon moyen de faire ça. Le plus proche que j'ai trouvé est d'ajouter "overflow:hidden ;" au div autour de la table et de perdre le texte. La vraie solution semble être d'abandonner le tableau. En utilisant des divs et un positionnement relatif, j'ai réussi à obtenir le même effet, sans l'héritage de l'application <table>

2015 UPDATE : C'est pour ceux qui, comme moi, veulent cette réponse. Après 6 ans, ça marche, merci à tous les contributeurs.

* { /* this works for all but td */
  word-wrap:break-word;
}

table { /* this somehow makes it work for td */
  table-layout:fixed;
  width:100%;
}

Answer 5

Comme mentionné, mettre le texte dans div fonctionne presque. Il suffit de spécifier le width de la div ce qui est une bonne chose pour les mises en page statiques.

Cela fonctionne sur FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>