web-dev-qa-db-fra.com

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

Duplicate possible:
Word-wrap dans un tableau html

Ce texte se comporte exactement comme je le souhaite sur Google Chrome (et les 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 le 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 génial.

Dans ma situation, cependant, il ne s’agit pas d’un div mais d’un table, comme ceci:

<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 n ° 1 et n ° 2 se produisent, mais pas le n ° 3. C'est-à-dire que la table cesse de se rétrécir après que les étapes 2 et 3 ne se soient jamais produites. Le mot de rupture ne semble pas filtrer.

Est-ce que quelqu'un sait comment faire n ° 3 arriver? La solution nécessite seulement de travailler dans Chrome, mais elle fonctionne également dans d’autres navigateurs, ce qui serait encore mieux.

P.S. "Ne pas utiliser de tables" n'est pas utile.

cssgoogle-chromehtml-tableword-wrap
75
Matthew Simoneau

table-layout: fixed forcera les cellules à s’ajuster à la table (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>
133
Matthew Simoneau

Vous pouvez essayer ceci:

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

Ceci, cependant, le fait apparaître comme ceci quand il y a assez d'espace, à moins que vous ajoutiez un <br> tag:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Donc, je suggérerais alors d'ajouter <br> balises où il y a des nouvelles lignes, si possible.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

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

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

21
Herman Schaaf