Word-wrap dans un tableau HTML

les travaux suivants pour moi dans Internet Explorer. Notez l'ajout de la 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>

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

ou

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

un long shot, mais double-check avec Firebug (ou similaire) que vous n'héritez pas accidentellement la règle suivante:

white-space:nowrap;

cela peut annuler votre comportement de rupture de ligne spécifié.

S'avère Qu'il n'y a pas de bonne façon de le faire. Le plus proche que je suis venu est d'ajouter "overflow:hidden;" à la div autour de la table et de perdre le texte. La vraie solution semble être d'abandonner la table. En utilisant les divs et le positionnement relatif j'ai pu obtenir le même effet, moins l'héritage de <table>

2015 mise à jour: 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é, en mettant le texte dans div presque fonctionne. Vous avez juste à spécifier le width du div , qui est des dispositions statiques chanceux.

cela fonctionne sur FF 3.6, IE 8, Chrome.

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

changer votre code

word-wrap: break-word;

à

word-break:break-all;

exemple

<table style="width: 100%;">
  <tr>
    <td align="left">
      <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 align="right"><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

problème avec

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

est qu'il ne fonctionnera pas si bon lorsque le texte a certains espaces, par exemple

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

si le mot andthenlongerwithoutspaces s'inscrit dans la cellule de la table dans une ligne mais long text with andthenlongerwithoutspaces ne le fait pas, le long mot sera cassé en deux, au lieu d'être enveloppé.

solution Alternative: insérer U+200B ( ZWSP ), U+00AD ( tiret souple ) ou U+200C ( ZWNJ ) en chaque long mot après chaque, disons, 20ème caractère.

texte de http://www.w3.org/TR/css3-text/#word-wrap

cette propriété spécifie si L'UA peut se briser dans un mot pour empêcher le débordement lorsqu'une chaîne par ailleurs Indestructible est trop longue pour s'insérer dans la boîte de ligne. Il n'a d'effet que lorsque "text-wrap' est "normal" ou "supprimer". Valeurs possibles

Check out cette démo

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

voici le lien vers lire

testé dans IE 8 et Chrome 13.

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

Cela fait que le tableau s'adapte à la largeur de la page et chaque colonne prend 50% de la largeur.

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

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

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

par exemple:

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

ou

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

</tr></table>

solution de contournement qui utilise débordement-enveloppement et fonctionne bien avec la disposition normale de la table + largeur de la 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;
}

prestations:

• utilise overflow-wrap:break-word au lieu de word-break:break-all . Ce qui est mieux parce qu'il essaie de casser sur les espaces d'abord, et coupe le mot seulement si le mot est plus grand que c'est conteneur.
• Non table-layout:fixed nécessaire. Utilisez votre auto-dimensionnement régulier.
• N'est pas nécessaire pour définir fixe width ou fixe max-width en pixels. Définir % du parent si nécessaire.

testé en FF57, Chrome62, IE11, Safari11

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

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

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

ou en utilisant word-break:break-all selon la suggestion D'Abhishek Simon.

la réponse qui a gagné la prime est correcte, mais cela ne fonctionne pas si la première rangée de la table a une cellule fusionnée/jointe (toutes les cellules obtiennent la largeur égale).

dans ce cas, vous devez utiliser les étiquettes colgroup et col pour 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>

ça marche 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;
}

Tables envelopper par défaut, donc assurez-vous que l'affichage des cellules de la table sont table-cell :

td {
   display: table-cell;
}

_{Pour le manque de runnable extraits de code:}

sans styles

td {
  border: 1px solid gold;
}

<table>
  <tr>
    <td>
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

utilisant table-layout: fixed pour table et word-wrap: break-word pour td ( réponse de Marc Stober )

td {
  border: 1px solid gold;
}

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

à l'Aide word-break: break-all ( Pratique la réponse de Stephen )

td {
  border: 1px solid gold;
}

<table>
  <tr>
    <td style="word-break: break-all">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

j'ai trouvé une solution qui semble fonctionner dans Firefox, Google Chrome et Internet Explorer 7-9. Pour faire une mise en page de table à deux colonnes avec un long texte d'un côté. J'ai cherché partout pour le même problème, et ce qui a fonctionné dans un navigateur a cassé l'autre, ou l'ajout de plus d'étiquettes à une table semble juste comme un mauvais codage.

Je n'ai pas utilisé de table pour cela. DL DT DD à la rescousse. Au moins pour la fixation d'une disposition en deux colonnes, qui est fondamentalement un glossaire/dictionnaire/mot-sens configuration.

<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>

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;
}

en utilisant le mot-wrap flottant et marge gauche, j'ai eu exactement ce dont j'avais besoin. J'ai juste pensé que je partagerais ça avec d'autres, peut-être que ça aidera quelqu'un d'autre avec une mise en page de style de définition à deux colonnes, avec des problèmes pour obtenir les mots à envelopper.

j'ai essayé d'utiliser word-wrap dans la cellule de table, mais il n'a fonctionné que dans Internet Explorer 9, (et Firefox et Google Chrome bien sûr) j'essaie surtout de réparer le navigateur Internet Explorer cassé ici.

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" >

Demo - http://jsfiddle.net/Ne4BR/749 /

cela a bien fonctionné pour moi. J'ai eu de longs liens qui causeraient la table à dépasser 100% sur les navigateurs web. Testé sur IE, Chrome, Android et Safari.

Bobby

une solution qui fonctionne avec Google Chrome et Firefox (non testé avec Internet Explorer) est de définir display: table-cell comme un élément de bloc.