Question Word-Wrap dans un tableau HTML


J'ai utilisé word-wrap: break-word pour envelopper le texte dans divle sable spans. Cependant, cela ne semble pas fonctionner dans les cellules de tableau. J'ai une table à width:100%, avec une ligne et deux colonnes. Texte en colonnes, mais avec le style ci-dessus word-wrap, ne pas envelopper. Cela amène le texte à dépasser les limites de la cellule. Cela se produit sous Firefox, Google Chrome et Internet Explorer.

Voici à quoi ressemble la source:

td {
  border: 1px solid;
}
<table style="width: 100%;">
  <tr>
    <td align="left">
      <div style="word-wrap: break-word;">Long Content</div>
    </td>
    <td align="right"><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

"Long Content" est plus grand que les limites de ma page, mais il ne rompt pas avec le HTML ci-dessus. J'ai essayé les suggestions ci-dessous pour ajouter text-wrap:suppress et text-wrap:normal, mais aucun n'a aidé.


491
2017-08-11 04:01


origine


Réponses:


Ce qui suit pour moi dans Internet Explorer. Notez l'ajout de 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>


562
2017-12-10 20:15



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

ou

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

125
2017-10-08 17:01



Un tir long, mais double-vérifier avec Pyromane (ou similaire) que vous n'héritez pas accidentellement la règle suivante:

white-space:nowrap;

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


99
2017-08-11 05:00



Il s'avère qu'il n'y a pas de bonne façon de le faire. Le plus proche, je suis venu ajouter "débordement: caché;" au div autour de la table et perdre le texte. La vraie solution semble être de laisser tomber la table. En utilisant divs et le positionnement relatif, j'ai été en mesure d'obtenir le même effet, moins l'héritage de <table>

MISE À JOUR 2015: Ceci 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%;
}

36
2017-08-12 00:08



Comme mentionné, mettre le texte dans div fonctionne presque Vous avez juste à spécifier le width du div, ce qui est heureux dispositions statiques.

Cela fonctionne sur FF 3.6, IE 8, Chrome.

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

23
2018-04-10 05:14



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>

14
2018-04-12 02:39



Problème avec

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

est-ce que ça ne marchera pas si le texte a certains espaces, par ex.

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

Si mot andthenlongerwithoutspaces s'intègre dans la cellule de table dans une ligne, mais long text with andthenlongerwithoutspaces ne pas, le mot long sera brisé en deux, au lieu d'être enveloppé.

Solution alternative: insérer U + 200B (ZWSP), U + 00AD (trait d'union doux)  ou U + 200C (ZWNJ) dans chaque mot long après chaque, disons 20 caractères.


12
2018-02-03 09:57



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

Cette propriété spécifie si l'agent utilisateur peut rompre un mot pour empêcher le dépassement de capacité lorsqu'une chaîne qui ne peut pas être brisée est trop longue pour tenir dans la zone de ligne. Cela n'a d'effet que lorsque 'text-wrap' est 'normal' ou 'supprimer'. Valeurs possibles


9
2017-08-11 04:41



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 lis


9
2017-08-12 06:21