Effets textuels

Le CSS met à disposition 4 propriétés permettant d’ajouter des effets textuels.

Text Overflow

La propriété text-overflow définit la manière dont un texte qui ne rentre pas dans un élément doit être disposé.

Cette propriété prend deux valeurs :

• clip : le texte dépassant de l’élément ne sera tout simplement pas montré, même si un mot doit être coupé en plein milieu
• ellipsis : le texte en trop ne sera pas coupé, mais des points de suspension (...) seront ajoutés afin de montrer qu’il y a davantage de contenu à voir.

Exemple :

#overflow1 {
    width: 100px;
    border: 1px solid black;
    overflow: hidden;
    text-overflow: clip;
}

#overflow2 {
    width: 100px;
    border: 1px solid black;
    overflow: hidden;
    text-overflow: ellipsis;
}

Note : Pour que les fonctionnalités de la propriété text-overflow soient bien prises en compte, il est important de rajouter 2 mentions CSS ;

/* Permet de ne pas avoir de retour à la ligne */
white-space: nowrap;
/* Permet de cacher tout ce qui est sensé dépasser du conteneur */
overflow: hidden;

word-wrap

La propriété word-wrap permet de couper les longs mots afin que ceux-ci soient renvoyés à la ligne.

Exemple :

p {
    word-wrap: break-word;
}

Coupure de mots