Word-Wrap dans un tableau HTML

J’ai utilisé word-wrap: break-word pour envelopper le texte en div s et span s. Cependant, cela ne semble pas fonctionner dans les cellules de tableau. J’ai une table en width:100% , avec une ligne et deux colonnes. Le texte en colonnes, bien que stylé avec le word-wrap ci word-wrap dessus, ne se termine pas. Cela fait passer le texte au-delà des limites de la cellule. Cela se produit sur Firefox, Google Chrome et Internet Explorer.

Voici à quoi ressemble la source:

 td { border: 1px solid; } 
 
Long Content
Short Content

“Long Content” 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 concernant l’ajout de text-wrap:suppress et text-wrap:normal , mais aucun n’a aidé.

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

 td { border: 1px solid; } 
 
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
 longtextwithoutspace 

ou

 longtextwithoutspace 

Un long coup, mais vé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 pas de bonne façon de le faire. Le plus proche est venu en ajoutant “overflow: hidden” au div autour de la table et perdre le texte. La vraie solution semble être de laisser tomber la table. En utilisant les divs et le positionnement relatif, j’ai pu obtenir le même effet, moins l’inheritance de

2015 UPDATE: Ceci est pour ceux comme moi qui veulent cette réponse. Après 6 ans, cela fonctionne, grâce à tous les consortingbuteurs.

 * { // 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 div fonctionne presque. Il suffit de spécifier la width du div , ce qui est une chance pour les mises en forme statiques.

Cela fonctionne sur FF 3.6, IE 8, Chrome.

  

Changer votre code

 word-wrap: break-word; 

à

 word-break:break-all; 

Exemple

 
longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content
Short Content

Problème avec

 longtextwithoutspace 

est-ce que ça ne marchera pas si le texte a des espaces, par exemple

 long text with andthenlongerwithoutspaces 

Si word andthenlongerwithoutspaces rentre pas dans la cellule du tableau sur une ligne, contrairement au long text with andthenlongerwithoutspaces , le mot long sera brisé 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 vingtième, disons.

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 «suppress». Valeurs possibles

Découvrez cette démo

 
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
Foo

Voici le lien à lire

Testé dans IE 8 et Chrome 13.

 
longtexthere
Foo

Cela fait que la table s’adapte à la largeur de la page et que chaque colonne occupe 50% de la largeur.

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

 
longtexthere
Foo

La seule chose à faire est d’append de la largeur au

ou au

dans

fonction de la mise en page que vous souhaitez réaliser.

par exemple:

 
looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word
Foo

ou

  
looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word
Foo
 

longtexthere

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

https://jsfiddle.net/krf0v6pw/

HTML

 
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

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-word au lieu de word-break:break-all . Ce qui est mieux, car il essaie d’abord de casser des espaces et de couper le mot uniquement si le mot est plus gros que son conteneur.
  • Pas de table-layout:fixed nécessaire. Utilisez votre auto-dimensionnement régulier.
  • Pas nécessaire pour définir une width fixe ou une width max-width fixe en pixels. Définissez le % du parent si nécessaire.

Testé dans FF57, Chrome62, IE11, Safari11

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:

 
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
Foo

ou en utilisant le word-break:break-all par la suggestion d’Abhishek Simon.

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

Dans ce cas, vous devez utiliser les colgroup et col pour l’afficher correctement:

 
Merged cell
VeryLongWordInThisCell Cell 2

Cela fonctionne pour moi:

  

Et l'atsortingbut de table est:

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

Si vous n’avez pas besoin d’une bordure de tableau, appliquez ceci:

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

Les tableaux s’emballent par défaut, assurez-vous donc que l’affichage des cellules du tableau est une table-cell :

 td { display: table-cell; } 

Pour le manque de fragments de code exécutables:

Sans styles

 td { border: 1px solid gold; } 
 
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord

J’ai trouvé une solution qui semble fonctionner dans Firefox, Google Chrome et Internet Explorer 7-9. Pour faire une disposition de tableau à deux colonnes avec un texte long d’un côté. J’ai cherché partout pour un problème similaire, et ce qui a fonctionné dans un navigateur a brisé l’autre, ou l’ajout de plusieurs 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 fixer une mise en page à deux colonnes, il s’agit essentiellement d’une configuration glossaire / dictionnaire / mot-signification.

 
test1
Fusce ulsortingcies mi nec orci tempor sit amet
test2
Fusce ulsortingcies
longest
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ulsortingcies 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.

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 un mot-clé flottant et une marge restante, j’ai exactement ce dont j’avais besoin. Juste pensé que je partagerais ceci avec d’autres, peut-être que cela pourrait aider quelqu’un d’autre avec une disposition de style de définition de deux colonnes, avec des problèmes pour obtenir les mots pour emballer.

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

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

 

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

Cela a très bien fonctionné pour moi. J’avais de longs liens qui feraient que la table dépasse 100% sur les navigateurs Web. Testé sur IE, Chrome, Android et Safari.

Policier

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