Comment empêcher le débordement du contenu dans un div, cellule 


Comment empêcher le débordement du contenu dans un div, cellule

Nous allons voir sur ce tutoriel comment limiter le débordement d'un contenu dans  un élément  html.L’idée est  de faire en sorte que le contenu d'un élément   ne dépasse pas la taille (fixée) de l'élément en débordant vers l’extérieur.




Pour limiter le débordement , bien qu’il ait plusieurs façons de le faire, nous allons utiliser la propriété CSS overflow.  Cette propriété permet de définir ce qui va se passer si le contenu d’un élément est trop grand.  
Overflow accepte ces valeurs :

  • visible : le contenu qui dépasse ne sera pas coupé. Il débordera à l’extérieur de l’élément.
  • hidden : le contenu qui dépasse sera coupé et ne sera pas visible
  • scroll : le contenu qui dépasse sera coupé mais il aura la présence d’une barre de défilement  qui permettra de le voir.
  • auto : une barre de défilement sera ajoutée s’il y a de dépassement.
  • initial : il met cette propriété à sa valeur par défaut.
  • inherit : hérite la propriété de l’élément parent.

Exemple :

shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds

Démo:

shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds shshhssnhshshssds