Traiter les débordements de contenus

Lorsqu'un mot est plus grand que la taille d'un cadre, par défaut, le navigateur laisse ce mot déborder du cadre.

Ce qui n'est pas forcément du plus belle effet, j'en conviens !

Pour éviter ce phénomène, plusieurs solutions seront possibles:

• Utiliser la propriété CSS2 overflow qui peut recevoir les valeurs suivantes:
  • hidden: tout ce qui dépasse ne sera pas affiché ! Radical, mais pas forcément bien !

  Il pourra être judicieux de combiner hidden avec la propriété du CSS3 text-overflow en lui passant la valeur ellipsis qui permet d'inclure des points de suspension.

  Compléter dans ce cas avec -o-text-overflow: ellipsis; pour Opera 9, -ms-text-overflow: ellipsis; pour microsoft

  • scroll ou auto: Des ascenseurs s'afficheront pour permettre de visualiser la suite...Bof !
  • visible: Le texte peut dépasser la zone d'affichage (débordement).
  • auto: Laisse l'agent decider ...
  • inherit: hérite du parent
  • initial: Positionneé à la valeur initiale

• text-overflow permet de signaler que le texte n'est pas totalement affiché suite à un débordement de la zone d'affichage.

  text-overflow: clip|ellipsis|string|initial|inherit;

  clip valeur par défaut, le texte ne peut pas s'afficher au delà de la zone de clipping de l'objet conteneur.

  ellipsis: ... seront affiché avant la zone de clipping

  string: les ... seront remplacés par le string que vous aurez renseigné (exemple: "---")

  initial: replace la valeur par défaut.

  inherit: hérite la valeur de celui du parent

A utiliser avec overflow: hidden.

• Utiliser la propriété CSS3 overflow-wrap (anciennement word-wrap toujours compatible et à mettre dans votre CSS pour les navigateurs ne reconnaissant pas overflow-wrap !) avec:
  • break-word: Brise le mot et passe le restant du mot à la ligne suivante.
  • normal: Valeur par défaut
• Utiliser la propriété hyphens:

  Cette propriété permet une césure en respectant les règles de typographie de la langue. Un trait d'union sera donc affiché pour le français et le mot sera coupé intelligement.

  Non reconnue par tous les navigateurs ! A combiner avec overflow-wrap (word-wrap) pour les navigateur ne le reconnaissant pas. Pour les autres, les différentes syntaxes pour les différents navigateurs:

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;

   

Problèmes des cellules d'un tableau

Le texte prime sur la taille des cellules d'un tableau. Pour s'en sortir:

• Indiquez la taille du tableau
• Fixez cette taille

table {
width: 100%;
table-layout: fixed;
}

Exemple

Exemple de césure avec remplacement de la fin du texte par ...

.exemple {

overflow: hidden;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;

}