web-dev-qa-db-fra.com

Word-wrap dans un tableau HTML

J'utilise Word-wrap: break-Word pour insérer du texte dans divs et spans. Cependant, cela ne semble pas fonctionner dans les cellules de tableau. J'ai une table réglée sur width:100%, avec une ligne et deux colonnes. Le texte en colonnes, bien que stylé avec le Word-wrap ci-dessus, n'est pas renvoyé à la ligne. 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 long mot 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:suppress et text-wrap:normal, mais cela ne m'a pas aidé.

htmlcsshtml-table
531
psychotik

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

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="Word-wrap: break-Word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>
595
Marc Stober
<td style="Word-break:break-all;">longtextwithoutspace</td>

ou

<span style="Word-break:break-all;">longtextwithoutspace</span>
148
Pratik Stephen

Une longue tentative, mais vérifiez bien 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é.

118
Rick Grundy

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

2015 UPDATE: C'est pour ceux qui comme moi 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%;
}
43
psychotik

Comme mentionné précédemment, mettre le texte dans div fonctionne presque. Vous devez simplement spécifier la width de la div, ce qui est une chance pour les 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>
29
loungerdork

Solution de contournement utilisant le débordement et fonctionnant correctement avec un format de tableau normal + largeur de tableau 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:

  • Utilisations overflow-wrap:break-Word au lieu de _Word-break:break-all_. Ce qui est mieux, car il essaie d'abord de casser des espaces et coupe le mot uniquement si ce dernier est plus gros que son conteneur.
  • Non _table-layout:fixed_ nécessaire. Utilisez votre auto-dimensionnement régulier.
  • Inutile de définir les variables width ou _max-width_ en pixels. Définissez _%_ du parent si nécessaire.

Testé sous FF57, Chrome62, IE11 et Safari11

18
Alph.Dev

Changer 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>
17
Duc Nguyen

Problème avec

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

est-ce que cela fonctionnera pas si bon quand le texte a quelques espaces, par exemple.

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

Si Word andthenlongerwithoutspaces s'inscrit dans une cellule de tableau sur une ligne mais que long text with andthenlongerwithoutspaces ne le fait pas, le long mot sera divisé en deux au lieu d'être encapsulé.

Solution alternative: insérez U + 200B ( ZWSP ), U + 00AD ( trait d'union ) ou U + 200C ( ZWNJ ) dans chaque mot après chaque, disons, le 20e caractère (voir toutefois 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 zéro n'affecte pas la lecture. Cependant, cela affecte le texte copié dans le presse-papier (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 sera 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 un graphème. Voir https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries pour plus d'informations.

15
Piotr Findeisen

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>

Ainsi, le tableau correspond à la largeur de la page et chaque colonne occupe 50% de la largeur.

Si vous préférez que la première colonne occupe davantage de pages, ajoutez un width: 80% à la 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 style="width:80%">
               <div style="Word-wrap: break-Word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>
10
Waylon Flinn

La seule chose à faire est d'ajouter de la largeur au <td> ou au <div> à l'intérieur du <td> en fonction de la mise en page que vous souhaitez obtenir.

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

Départ 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 vers lire

9
abi1964

La réponse qui a gagné la prime est correcte, mais cela ne fonctionne pas si la première ligne de la la table a une cellule fusionnée/jointe (toutes les cellules ont la même largeur).

Dans ce cas, vous devez utiliser les balises 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>
8
Indrek
<p style="overflow:hidden; width:200px; Word-wrap:break-Word;">longtexthere<p>
8
Sarawut Positwinyu

Il semble que vous deviez 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><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-all selon la suggestion de Abhishek Simon.

7
stslavik

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>
5
Lavekush Agrawal

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

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

td {
   display: table-cell;
}
3
ironsam

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

Je n'ai pas utilisé une table pour cela. DL DT DD à la rescousse. Au moins pour corriger une mise en page à deux colonnes, il s’agit essentiellement d’une installation glossary/dictionary/Word.

<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 Word-wrap et la marge à gauche, j'ai exactement ce dont j'avais besoin. Si je pensais partager cela avec d’autres personnes, cela pourrait peut-être aider une autre personne avec une disposition de style de définition à deux colonnes, ayant du mal à comprendre les mots.

J'ai essayé d'utiliser Word-wrap dans la cellule du tableau, mais cela ne fonctionnait que dans Internet Explorer 9 (et Firefox et Google Chrome bien sûr) en essayant principalement de réparer le navigateur Internet Explorer endommagé.

3
Yogurt The Wise

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 100% du tableau sur les navigateurs Web. Testé sur IE, Chrome, Android et Safari.

1
Bobby

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

0
Antoine Guiral