web-dev-qa-db-fra.com

Empêcher le texte de chevaucher la largeur td du tableau

Comment puis-je restreindre la table <td> entrée à développer sur tout l'écran lorsque l'entrée est trop longue?

htmlcsshtml-tablewidth
28
daniel

Eh bien, il y a max-width, max-height et overflow en CSS.

Donc

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

limiterait la largeur et la hauteur maximales à 150 pixels, et il peut s'agir de moins de 150 jusqu'à 150, et tout ce qui ne rentre pas à l'intérieur sera coupé et caché à la vue.

Débordement par défaut (overflow: visible;) consiste simplement à permettre à tout ce qui ne rentre pas à l'intérieur de son conteneur spécifié de déborder à l'extérieur de celui-ci. Si vous voulez seulement le limiter horizontalement et ne voulez rien cacher, Word-wrap peut aider:

td.whatever
{
    max-width: 150px;
    Word-wrap: break-Word;
}

Word-wrap cassera les mots chaque fois qu'il en aura besoin, même si ce n'est pas à la fin d'un mot. Vous pouvez également simplement utiliser height et width pour spécifier une taille fixe si vous ne voulez pas que la table se développe ou se rétrécisse du tout.

52
Phoenix

Vous pouvez utiliser Word-wrap:break-Word;, donc les mots trop longs sont enveloppés.

17
Floern
td.whatever_class{
    max-width: 100px;
}

remplacez 100px par la largeur que vous souhaitez. 1000px est une bonne largeur pour les sites Web car il s'adaptera à presque tous les moniteurs que les gens ont aujourd'hui, donc si vous aviez 20 colonnes, faites-en 50px par exemple.

6
lavelle

Vous devez spécifier LES DEUX max-width et display styles (parce que l'attribut display est drôle parce que c'est un td, pas un élément normal) par ex.

td{
    max-width: 100px;
    display: inline-block;
}
2
Dairy Window

Il y a aussi une belle solution avec la propriété max-width: 0px; il sera donc responsable de toute la largeur de la table.

1
Experimenter