Utilisation de "word-wrap : break-word" dans un tableau

Question

Duplicata possible :
Word-wrap dans un tableau html

Ce texte se comporte exactement comme je le souhaite sur Google Chrome (et d'autres navigateurs modernes) :

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>

1. Lorsque le navigateur est suffisamment large, a+ et b+ sont sur la même ligne.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

2. Lorsque vous réduisez la largeur du navigateur, a+ et b+ sont placés sur des lignes séparées.

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

3. Lorsque b+ ne peut plus tenir, il est cassé et placé sur deux lignes (pour un total de trois lignes).

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbb
   bbbbbbbb

C'est très bien.

Dans ma situation, cependant, il ne s'agit pas d'une div mais un table comme ça :

<table style="border:1px solid black; width:100%; word-wrap:break-word;">
  <tr>
    <td>
      <p>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </p>
    </td>
  </tr>
</table>

Dans ce cas, les numéros 1 et 2 se produisent, mais pas le numéro 3. En d'autres termes, la table cesse de se rétrécir après l'étape 2 et l'étape 3 ne se produit jamais. Le mot de rupture ne semble pas filtrer vers le bas.

Quelqu'un sait-il comment faire pour que le numéro 3 se produise ? La solution ne doit fonctionner que dans Chrome, mais si elle fonctionnait également dans d'autres navigateurs, ce serait encore mieux.

P.S. "N'utilisez pas de tableaux" n'est pas utile.

Answer 1

table-layout: fixed va forcer les cellules à s'adapter au tableau (et non l'inverse), par exemple :

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
              table-layout: fixed;">
  <tr>
    <td>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </td>
  </tr>
</table>

Answer 2

Vous pouvez essayer ceci :

td p {word-break:break-all;}

Cependant, cela le fait apparaître comme cela lorsqu'il y a suffisamment d'espace, à moins que vous n'ajoutiez un <br> étiquette :

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Je suggère donc d'ajouter <br> où il y a des sauts de ligne, si possible.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

http://jsfiddle.net/LLyH3/3/

De plus, si cela ne résout pas votre problème, il y a un fil de discussion similaire. ici .