Retour à la ligne dans un tableau HTML

J'ai utilisé word-wrap: break-wordpour envelopper le texte en divs et spans. Cependant, il ne semble pas fonctionner dans les cellules du tableau. J'ai un tableau défini sur width:100%, avec une ligne et deux colonnes. Le texte dans les colonnes, bien que stylisé avec ce qui précède word-wrap, ne se termine pas. Cela fait que le texte dépasse 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 mot long ci-dessus est plus grand que les limites de ma page, mais il ne rompt pas avec le code HTML ci-dessus. J'ai essayé les suggestions ci-dessous d'ajouter text-wrap:suppresset text-wrap:normal, mais aucun n'a aidé.

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

td {
  border: 1px solid;
}

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

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

ou

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

Un long shot, mais revérifiez avec Firebug (ou similaire) que vous n'héritez pas accidentellement de la règle suivante:

white-space:nowrap;

Cela peut remplacer votre comportement de saut de ligne spécifié.

Il s'avère qu'il n'y a aucun bon moyen de le faire. Le plus proche que je suis venu est d'ajouter "débordement: caché;" à la div autour de la table et perdre le texte. La vraie solution semble cependant être d'abandonner la table. En utilisant des divs et un positionnement relatif, j'ai pu obtenir le même effet, moins l'héritage de<table>

MISE À JOUR 2015: C'est pour ceux comme moi qui veulent cette réponse. Après 6 ans, cela fonctionne, 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%;
}

Comme mentionné, mettre le texte dans divpresque fonctionne. Il vous suffit de préciser le widthdu div, ce qui est heureux pour les dispositions qui sont statiques.

Cela fonctionne sur FF 3.6, IE 8, Chrome.

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

Solution de contournement qui utilise le débordement et fonctionne bien avec une disposition de table normale + largeur de table 100%

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Avantages:

• Utilise overflow-wrap:break-wordau lieu de word-break:break-all. Ce qui est mieux car il essaie d'abord de casser les espaces et ne coupe le mot que si le mot est plus grand que son conteneur.
• Pas table-layout:fixednécessaire. Utilisez votre dimensionnement automatique habituel.
• Pas nécessaire pour définir fixe widthou fixe max-widthen pixels. Définissez %le parent si nécessaire.

Testé dans FF57, Chrome62, IE11, Safari11

Changez votre code

word-wrap: break-word;

à

word-break:break-all;

Exemple

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Problème avec

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

est que cela ne fonctionnera pas si bien quand le texte a des espaces, par exemple

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Si le mot andthenlongerwithoutspacestient dans la cellule du tableau sur une ligne mais long text with andthenlongerwithoutspacesne le fait pas, le mot long sera divisé en deux au lieu d'être encapsulé.

Solution alternative: insérez U + 200B ( ZWSP ), U + 00AD ( trait d'union souple ) ou U + 200C ( ZWNJ ) dans chaque mot long après chaque disons 20e caractère (cependant, voir l'avertissement ci-dessous):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Avertissement : l'insertion de caractères supplémentaires de longueur nulle n'affecte pas la lecture. Cependant, cela affecte le texte copié dans le presse-papiers (ces caractères sont bien sûr également copiés). Si le texte du presse-papiers est utilisé ultérieurement dans une fonction de recherche de l'application Web ... la recherche va être interrompue. Bien que cette solution soit visible dans certaines applications Web bien connues, évitez si possible.

Avertissement : lors de l'insertion de caractères supplémentaires, vous ne devez pas séparer plusieurs points de code dans le graphème. Voir https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries pour plus d'informations.

Découvrez cette démo

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Voici le lien à lire

Testé dans IE 8 et Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Cela entraîne le tableau à s'adapter à la largeur de la page et chaque colonne à occuper 50% de la largeur.

Si vous préférez que la première colonne occupe plus de la page, ajoutez un width: 80%au tdcomme dans l'exemple suivant, en remplaçant 80% par le pourcentage de votre choix.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

La seule chose à faire est d'ajouter de la largeur à <td>l' <div>intérieur ou à l' intérieur en <td>fonction de la disposition que vous souhaitez réaliser.

par exemple:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

ou

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

La réponse qui a remporté la prime est correcte, mais cela ne fonctionne pas si la première ligne du tableau a une cellule fusionnée / jointe (toutes les cellules ont une largeur égale).

Dans ce cas, vous devez utiliser les balises colgroupet colpour l'afficher correctement:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Il semble que vous devez définir word-wrap:break-word;un élément de bloc ( div), avec une largeur spécifiée (non relative). Ex:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

ou en utilisant word-break:break-allla suggestion d'Abhishek Simon.

Cela fonctionne pour moi:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

Et l'attribut de table est:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

Si vous n'avez pas besoin d'une bordure de table, appliquez ceci:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

J'ai trouvé une solution qui semble fonctionner dans Firefox, Google Chrome et Internet Explorer 7-9. Pour faire une disposition de table à deux colonnes avec du texte long d'un côté. J'ai cherché partout un problème similaire, et ce qui a fonctionné dans un navigateur a cassé l'autre, ou ajouter plus de balises à une table semble être un mauvais codage.

Je n'ai PAS utilisé de table pour cela. DL DT DD à la rescousse. Au moins pour corriger une mise en page à deux colonnes, c'est essentiellement une configuration de glossaire / dictionnaire / signification de mot.

Et un style générique.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

En utilisant le retour à la ligne flottant et la marge à gauche, j'ai obtenu exactement ce dont j'avais besoin. Je pensais juste partager cela avec d'autres, peut-être que cela aidera quelqu'un d'autre avec une mise en page de style de définition à deux colonnes, avec des difficultés à boucler les mots.

J'ai essayé d'utiliser le retour automatique à la ligne dans la cellule du tableau, mais cela ne fonctionnait que dans Internet Explorer 9 (et Firefox et Google Chrome bien sûr), essayant principalement de réparer le navigateur Internet Explorer cassé ici.

Les tableaux sont encapsulés par défaut, assurez-vous donc que l'affichage des cellules du tableau est table-cell:

td {
   display: table-cell;
}

style = "table-layout: fixed; width: 98%; word-wrap: break-word"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Démo - http://jsfiddle.net/Ne4BR/749/

Cela a très bien fonctionné pour moi. J'avais de longs liens qui feraient dépasser le tableau à 100% sur les navigateurs Web. Testé sur IE, Chrome, Android et Safari.

Une solution qui fonctionne avec Google Chrome et Firefox (non testée avec Internet Explorer) consiste à définir display: table-cellcomme élément de bloc.

Vous pouvez l'essayer si cela vous convient ...

Mettez une zone de texte à l'intérieur de votre td et désactivez-la avec la couleur de fond blanc et définissez son nombre de lignes.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>