Retour à la ligne dans un tableau HTML


566

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


ajouter un trait d'union dur. <tr> <td style = "text-wrap: normal; word-wrap: break-word"> Ceci est une présentation. </td> </tr>
adatapost

Malheureusement, le texte qu'il contient provient du contenu généré par l'utilisateur. Bien sûr, je pouvais le pré-traiter et ajouter le trait d'union, mais j'espérais qu'il y aurait une meilleure façon.
psychotik

Je m'excuse d'avoir utilisé le mot «trait d'union dur». En HTML, le trait d'union simple est représenté par le caractère "-" (& # 45; ou & # x2D;). Le trait d'union doux est représenté par la référence d'entité de caractère & shy; (& # 173; ou & # xAD;)
adatapost

Utilisez-vous vraiment <code>break-wor<em>k</em> </code>? Peut-être que cela pourrait avoir quelque chose à voir avec ça.
Ms2ger

1
Si vous êtes ici, vous voudrez peut-être également consulter white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space
Tom Prats

Réponses:


624

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>


@ewomac ouais, parfois je dois juste ignorer les erreurs VS2010 sur HTML / CSS si je sais que cela fonctionnera dans le navigateur.
Marc Stober

2
@marc !! mec, merci beaucoup pour cela. J'ai été chargé de créer une version mobile d'un site client qui utilise des tables, et j'avais du mal à le faire fonctionner! table-layout: fixe a fait l'affaire!
débogage le

17
Cela rend les autres colonnes beaucoup trop larges.
Clément

2
Assurez-vous de lire developer.mozilla.org/en-US/docs/Web/CSS/table-layout Les largeurs de tableau et de colonne sont définies par les largeurs des éléments de tableau et de colonne ou par la largeur de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes. Cela semble également bon pour les performances.
Sam Barnum

2
@ Clément voir la réponse d'Indrek ci-dessous à propos de <colgroup>, cela a corrigé cela pour moi.
andrewtweber

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

ou

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

Peut confirmer que l'approche de Pratik fonctionne également sur Safari sur iOS (iPhone).
occulus

Pour contourner le problème avec certains mots courts et certains mots longs, vous pouvez potentiellement prétraiter le texte et envelopper uniquement les mots longs (par exemple,> 40 caractères) dans le <span>.
nornagon

9
cela ne supporte pas par firefox, opéra
meotimdihia

5
cela ne cassait pas préférentiellement les caractères non verbaux (comme si j'avais une série de mots plus courts séparés par des espaces, cela courrait toujours les mots jusqu'à la ligne, puis coupait le dernier mot en deux). Word-wrapne brisera les mots que lorsque cela sera nécessaire
Hashbrown

Cette approche est meilleure car ne nécessite pas table-layout: fixed;.
Finesse

125

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


C'est ce qui a été hérité et a rompu le mot pour moi
shane lee

@RickGrundy À quoi le remplacez-vous si vous rencontrez ce problème?
cokedude

7
@cokedude Je suis trop tard ici, mais c'estwhite-space:normal;
Beer Me

46

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

29

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>

2
Vous pouvez ajouter min-width: 100%avec widthpour vous assurer qu'il divoccupe toute la cellule.
user1091949

Je veux faire un retour à la ligne avec des virgules (,). Comme Long,Long,Long,Long,Long. Je veux envelopper par après une virgule (,).
Karthikeyan le

20

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


Bien que ce hack semble en fait fonctionner dans tous les navigateurs, sachez que la spécification CSS ne fournit aucune garantie à ce sujet. Selon w3.org/TR/CSS21/visudet.html#propdef-max-width , "l'effet de" min-width "et" max-width "sur les tableaux, les tableaux en ligne, les cellules de tableau, les colonnes de tableau et les groupes de colonnes est indéfini " .
Mark Amery

17

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>


-1; cela fait que le navigateur ignore complètement les sauts de mots et se casse au milieu des mots même s'il n'en a pas besoin. C'est rarement un comportement souhaitable et probablement pas le comportement que le PO voulait, sinon il n'aurait pas utilisé break-worden premier lieu.
Mark Amery

16

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.


La sortie de ceci est peut-être légèrement meilleure si, en mots suffisamment longs, vous insérez un trait d'union doux après chaque caractère, afin que le navigateur puisse briser le mot de manière fiable sur le bord droit de l'élément contenant.
Mark Amery

Bien qu'il s'agisse d'une solution viable, la suggestion apparemment inoffensive d'ajouter quelque chose "après chaque, disons, 20e caractère" est semée d'embûches si vous voulez le faire par programme sur votre serveur. Itérer sur les caractères d'une chaîne Unicode est difficile dans la plupart des langages de programmation. Au mieux , un langage peut faciliter l'itération sur les points de code Unicode, mais ceux-ci ne sont pas nécessairement ce que nous voudrions appeler des "caractères" (par exemple, ils peuvent être écrits comme deux points de code). Nous entendons probablement vraiment des "graphèmes", mais je ne connais aucun langage qui rendrait insignifiant leur bouclage.
Mark Amery

1
@MarkAmery vous avez raison. Cependant, même avec ASCII ordinaire, ce n'est pas génial. J'ai ajouté des "avertissements".
Piotr Findeisen

14

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


-1; l'utilisation break-allentraînera le navigateur à ignorer complètement les sauts de mots pour décider où placer les sauts de ligne, avec pour effet que même si votre cellule contient une prose normale sans mots très longs, vous vous retrouverez avec des sauts de ligne au milieu des mots. Ceci est généralement indésirable.
Mark Amery

10

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>

10

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>

1
Cela répète simplement ce que la réponse de loungerdork a déjà dit des mois plus tôt sans ajouter de nouvelles informations ou de nouvelles informations.
Mark Amery


8

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>

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

1
-1 pour l'absence d'explication et la mauvaise solution. Placer le contenu à l'intérieur d'une largeur de pixel fixe pdans une cellule de tableau qui n'a pas de largeur de pixel fixe finira presque certainement par pdéborder ou ne pas remplir la cellule de tableau.
Mark Amery

8

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.


5

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>

Comme plusieurs autres réponses, l'élément clé ici qui fait fonctionner fonctionne table-layout: fixed, mais il y a déjà une réponse beaucoup plus ancienne qui le suggère, donc cette réponse n'ajoute aucune nouvelle information.
Mark Amery

4

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

Il y a déjà une réponse beaucoup plus ancienne suggérant d'utiliser table-layout: fixed; celui-ci n'ajoute rien de nouveau à la page.
Mark Amery

4

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.


2

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

-1; le texte dans n'importe quel élément HTML enveloppe par défaut, pas seulement les tableaux. La suggestion ici n'a pas vraiment de sens.
Mark Amery du

1

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.


Il s'agit essentiellement d'un doublon comme réponse la plus votée ; dans les deux cas, la solution se résume à "utiliser table-layout: fixed".
Mark Amery

0

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.


0

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.