Lorsque l'on définit une dimension fixe pour notre bloc, il arrive que le texte contenu dedans soit trop large et qu'il "dépasse" donc par les bords.
Pour contrecarrer cela et ainsi contrôler les dépassements il existe deux propriétés CSS.
La première propriété que nous allons voir est la propriété overflow. Celle-ci existe pour contrôler les dépassements verticaux.
La propriété overflow peut prendre quatre valeurs au choix :
visible : si le texte dépasse, il reste visible et sort du bloc (part défaut)
hidden : s'il dépasse le texte est caché et se fait donc couper à un moment
scroll : des barres de défilement sont placées aux côtés du bloc pour pouvoir descendre et ainsi voir le texte
auto : pareil que scroll sauf que les barres ne sont placées que si le texte dépasse
Personnellement je vous recommande d'utiliser "auto" plutôt que "scroll" si vous avez des blocs à traiter de la sorte, afin de ne pas avoir des barres de défilement inutiles.
La deuxième propriété que nous allons voir est word-wrap.
Cette propriété s'applique uniquement si votre texte dépasse du cadre horizontalement. Généralement ce n'est pas le cas car le navigateur sait comment interpréter le retour à la ligne, ou même forcer ce retour à la ligne entre les tirets et les espaces.
Cependant si vous mettez une longue suite de lettres sans tirets ni espaces, il est possible que ce mot sorte du cadre horizontalement.
Pour forcer le retour à la ligne on utilise la propriété word-wrap et on lui assigne la valeur "break-word".