1. #1
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 386
    Points : 88
    Points
    88

    Par défaut Largeur de TD grandie avec des mots trop longs

    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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 948
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 948
    Points : 25 507
    Points
    25 507

    Par défaut

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

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 762
    Points
    20 762

    Par défaut

    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 */
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 386
    Points : 88
    Points
    88

    Par défaut

    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.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 948
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 948
    Points : 25 507
    Points
    25 507

    Par défaut

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

  6. #6
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 386
    Points : 88
    Points
    88

    Par défaut

    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

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 762
    Points
    20 762

    Par défaut

    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
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 386
    Points : 88
    Points
    88

    Par défaut

    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 !

  9. #9
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 386
    Points : 88
    Points
    88

    Par défaut

    (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 : 11
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>

  10. #10
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 762
    Points
    20 762

    Par défaut

    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.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  11. #11
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 386
    Points : 88
    Points
    88

    Par défaut

    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.

  12. #12
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 762
    Points
    20 762

    Par défaut

    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...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  13. #13
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 386
    Points : 88
    Points
    88

    Par défaut

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

  14. #14
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 948
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 948
    Points : 25 507
    Points
    25 507

    Par défaut

    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.

  15. #15
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 386
    Points : 88
    Points
    88

    Par défaut

    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 ?

  16. #16
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 948
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 948
    Points : 25 507
    Points
    25 507

    Par défaut

    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.

  17. #17
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 762
    Points
    20 762

    Par défaut

    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


    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">
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Problème de clean avec des chemins trop longs des plugins
    Par obrun dans le forum Eclipse Java
    Réponses: 1
    Dernier message: 23/03/2010, 14h26
  2. [Tableaux] Pb mot trop long qui fait agrandir mon tableau !
    Par wormseric dans le forum Fonctions
    Réponses: 8
    Dernier message: 21/07/2006, 12h23
  3. PB avec mot trop long qui agrandit mon tableau !
    Par wormseric dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 19/07/2006, 17h01
  4. Mot trop long
    Par Toudy dans le forum ASP
    Réponses: 6
    Dernier message: 28/07/2004, 18h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo