Largeur de TD grandie avec des mots trop longs

**Pgs** · 03/11/2017, 10h06

Bonjour,

J'affiche un tableau en définissant la propriété width de chaque TD en unité rem.
Tout fonctionne très bien et si le texte d'un TD est long, il va à la ligne, ce qui permet le respect de la largeur des TD.
Le seul problème survient lorsque le texte contient un mot trop long pour tenir dans la largeur du TD.
Dans ce cas, ce mot force le TD à s'élargir.
Y a t'il un moyen d'obliger le passage à la ligne de la partie de mot qui "dépasse" afin que le TD garde quoi qu'il arrive la largeur qui lui est assignée ?
Merci d'avance
Philippe

**NoSmoking** · 03/11/2017, 13h55

Bonjour,
essaies de mettre un table-layout:fixed sur ta <table>.

Invité · 03/11/2017, 13h58

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
table-layout:fixed;
overflow-wrap: break-word;/* passage à la ligne forcé */ 
-moz-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; /* césure propre */

**Pgs** · 03/11/2017, 15h50

Merci

* l'ajout de table-layout:fixed au niveau de la table ne change pas le comportement de mon tableau,
* l'ajout de overflow-wrap: break-word; ne change rien non plus,
* l'ajout de word-break:break-all; produit un effet, mais il coupe tous les mots en fin ligne, même si ces mots sont moins larges que le td, et pourraient donc être affichés en entier sur la ligne suivante.

**NoSmoking** · 03/11/2017, 19h10

J'ai du mal à saisir ce qui t'importe, le non agrandissement de tes cellules ou le fait que les mots se coupent proprement.

Je te renvoie à cette discussion où beaucoup de choses se sont dites : Fixer taille colonnes table en %.

**Pgs** · 03/11/2017, 23h07

J'ai deux tableaux qui se suivent (l'un en dessous de l'autre) et qui ont les mêmes colonnes (même nombre et mêmes largeurs - définies en unité rem).

Cela fait un bel effet visuel. Les colonnes du second semblent prolonger celles du premier.

Mais une des colonnes est assez étroite (c'est volontaire).

Si j'affiche dans cette colonne du texte dont un mot est plus large qu'elle, alors cette colonne s'élargit pour afficher ce mot en entier sans le couper.

Je perds alors l'alignement des colonnes entre les deux tableaux.

Si aucun mot ne dépasse à lui tout seul la largeur de la colonne, tout redevient normal.

Je voudrais que, uniquement dans la cas d'un mot plus large que la colonne à lui tout seul, il soit coupé afin que la colonne ne "s'écarte pas" pour l'afficher.

Merci

Invité · 04/11/2017, 06h57

Bonjour,

4 solutions :

1- tant pis...

2- élargir la colonne

3- En CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

abracadabra:shazam;

4- Sinon, voir en JavaScript :

Trouver la largeur de la colonne,
en déduire le nombre de caractères maxi par ligne,
couper les mots plus longs

**Pgs** · 04/11/2017, 22h59

Ce que je ve comprends pas c'est que
* word-break:break-all; fonctionne
* ni word-wrap:break-word; ni overflow-wrap:break-word; ne fonctionnent !

**Pgs** · 05/11/2017, 09h07

(suite)

Voici en image et en code mon problème :

word-break:break-all fonctionne
overflow-wrap: break-word ne fonctionne pas

Nom : table-test.jpg
Affichages : 783
Taille : 107,9 Ko

Nom : table-test.jpg
Affichages : 783
Taille : 107,9 Ko

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /></head><BODY LANG="fr-FR" DIR="LTR">
<table style="table-layout: fixed;"><tr><td style="width:100px;background-color:rgb(200,200,200);border:1px solid;"><u>Avec juste table-layout:fixed</u><br><br>Ceci est un texte ne contenant pas de chaîne de caractères dont la longueur dépasse celle du TD</td></tr></table>
<table style="table-layout: fixed;"><tr><td style="width:100px;background-color:rgb(200,200,200);border:1px solid;"><u>Avec juste table-layout:fixed</u><br><br>Ceci est un texte contenant une chaînedecaractèresdontlalongueurdépassecelleduTD</td></tr></table>
<table style="table-layout: fixed;"><tr><td style="width:100px;background-color:rgb(200,200,200);border:1px solid;word-break:break-all;"><u>Avec word-break:break-all</u><br><br>Ceci est un texte contenant une chaînedecaractèresdontlalongueurdépassecelleduTD</td></tr></table>
<table style="table-layout: fixed;"><tr><td style="width:100px;background-color:rgb(200,200,200);border:1px solid;overflow-wrap:break-word;"><u>Avec overflow-wrap:break-word</u><br><br>Ceci est un texte contenant une chaînedecaractèresdontlalongueurdépassecelleduTD</td></tr></table></BODY></html>

Invité · 05/11/2017, 09h21

Bonjour,

et que veux-tu qu'on fasse de plus ?

Je t'ai donné 4 solutions...

En voilà une 5ème :
5- modifier la mise en page.

**Pgs** · 05/11/2017, 10h19

C'est vrai.

Mais dans tes 5 solutions, la seule dans laquelle tu ne te moques pas gentillement de moi est celle, assez lourde, en Javascript.

Vu que overflow-wrap: break-word semble sur le principe la réponse parfaite à mon besoin, j'essaye - et je m'en excuse auprès de toi si tu trouves que ça n'est pas la bonne démarche - de comprendre pourquoi je n'arrive pas à l'utiliser.

Invité · 05/11/2017, 11h03

Cet exemple fonctionne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <td>
      FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)
    </td>
    <td>
      bla bla
    </td>
  </tr>
</table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
table {
  width: 20em;
  table-layout: fixed;
  overflow-wrap: break-word;
}
table td {
  width: 50%;
  background: gold;
  border: 1px solid #ccc;
}

Bon. Encore faut-il parler allemand...

**Pgs** · 05/11/2017, 11h31

Merci !
ça marche nickel sur chrome.
Sur IE11, ça déborde.

**NoSmoking** · 05/11/2017, 11h46

J'aurais plusieurs remarques à faire.

• Lorsque tu fais un fichier de test autant essayer de le faire complet en séparant bien les différents tests, ceci implique une structure cohérente car une <table> avec une seule cellule cela reste moyen et autant utiliser des classes pour cibler tes différents éléments à tester.

• table-layout: fixed se base sur la largeur de la table et des cellules, mettre une largeur sur la <table> est donc nécessaire pour obtenir le résultat escompté.

• overflow-wrap:break-word n'est supporté par IE, il faut utiliser en parallèle word-wrap:break-word.

• La lecture attentive des documentations est un réel avantage.

**Pgs** · 05/11/2017, 12h15

Merci pour tes conseils et explications.

J'ai pu avancer grâce à vous deux.

Je constate juste quelque chose : word-wrap:break-word n'est pris en compte que si je place <div></div> dans chaque <td></td>.

Avez vous une idée de pourquoi et de comment pour éviter d'avoir à faire ça ?

**NoSmoking** · 07/11/2017, 10h15

Je constate juste quelque chose : word-wrap:break-word n'est pris en compte que si je place <div></div> dans chaque <td></td>.

il n'y a aucune raison si ce n'est que tu déclares peut-être mal le CSS.

Invité · 07/11/2017, 14h18

Bonjour,

tu es un peu pénible à ne jamais montrer ton code....

Celui-ci fonctionne (même sur Edge) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
table {
  width: 100%; /*100% de son conteneur*/
  table-layout: fixed;
  word-wrap: break-word;
  overflow-wrap: break-word; /* word-wrap est devenu un alias de overflow-wrap, mais encore nécessaire pour I.E. ! */
  -moz-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; /* césure propre */
}

Important : pour avoir des césures propres

CSS hyphens

Le comportement défini par auto dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML lang pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.

Par conséquent, en début de fichier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE html>
<html lang="fr">

Largeur de TD grandie avec des mots trop longs

Dimensionnement en CSS

Discussions similaires

Partager

Partager