Points de suspensions avec text-overflow et césures avec hyphens

Les points de suspension

Pour éviter la dénaturation de la mise en page d’un document, il est parfois nécessaire dans différents contextes de masquer les contenus dimensionnés d’un élément avec la règle overflow en scroll, auto ou hidden.

Ainsi, tous les contenus débordant seront alors invisibles et rognés. Toutefois, il est tout de même essentiel de laisser un indice afin d’indiquer qu’un contenu masqué est présent. C’est dans cette situation que la propriété CSS3 text-overflow intervient. Cette propriété, combinée à la valeur ellipsis permet la génération de points de suspension. Ces points sont placés à l’endroit où le terme est rogné. Une autre possibilité de substitution de l’indice grâce à la propriété text-overflow-ellipsis.

Pour mettre en œuvre cette propriété, voici ce qu’il faut faire :

suspension

Il est à noter que text-overflow ne coupe rien puisqu’il ne propose que de donner une indication sur un texte déjà coupé, notamment via overflow hidden dans la plupart des cas.

Au niveau de la compatibilité, la propriété text-overflow est compatible sur tous les navigateurs actuels à savoir Safari 3, Opera 9, Chrome 4 et IE 6 étant donné qu’il a été proposé par Microsoft.
Seules les versions antérieures à Firefox 5 ne supportent pas la propriété.

Les césures (hyphénation)

Il faut tout d’abord savoir que la propriété hyphens pour l’obtention des césures n’est pas supportée par tous les navigateurs. Seuls quelques navigateurs sont compatibles avec la propriété : IE10, Safari 5.1 et Firefox 6 ou 8 selon les langues.

Plus étendu que la propriété word-wrap, la propriété hyphens permettant d’obtenir une césure permet à cette dernière d’être plus intelligente puisqu’elle s’adapte parfaitement aux règles typographiques de la langue sélectionnée, et affiche également des traits d’union.

Hyphens en application

cesure

Répondre