Gérer les débordements de contenus grâce à CSS

Sommaire

• overflow: hidden : circulez, y'a rien à voir !
• Le retour à la ligne forcé avec word-wrap : chérie, ça va couper !
• Les points de suspension avec text-overflow
• La césure propre avec hyphens
• Fixer des limites avec max-width
• Cas des cellules de tableau

Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants.

Préambule

J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Vous n'êtes pas maître de votre contenu et il va falloir vous y faire.

Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs…

overflow: hidden : circulez, y'a rien à voir !

La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc.

A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto).

Voici comment mettre en œuvre cette propriété :

p {
  width: 200px; /* à modifier selon vos besoins */
  overflow: hidden; /* les dépassements seront masqués */
}

Même si cette propriété est actuellement reconnue par l'ensemble du collège des navigateurs, reconnaissons que son manque de souplesse est pour le moins frustrante. Passons donc à d'autres méthodes encore méconnues...

Le retour à la ligne forcé avec word-wrap : chérie, ça va couper !

Dans un texte de contenu, lorsqu’un mot (sans espace ni trait d’union) est plus large que la dimension définie pour son parent, le comportement normal consiste à faire déborder le texte au delà de la largeur normale du cadre, sans retour à la ligne et sans que la dimension du conteneur ne soit affectée.

Il est toutefois possible de forcer le retour à la ligne d’un mot long à l’aide de la propriété CSS3 word-wrap, appliquée au parent et qui aura pour effet de couper le mot à un endroit arbitraire afin de provoquer un retour à la ligne.

La propriété word-wrap admet deux valeurs : normal par défaut, et break-word :

.bloc { 
  word-wrap: break-word;
}

Cette précaution se révèle particulièrement pratique dans les projets web où l’on n’est pas toujours maître du contenu et où de multiples rédacteurs alimentent le site, par exemple via un gestionnaire de contenu (CMS).

En effet, un certain nombre de cas de figure sont susceptibles de dégrader complètement un design web en raison des débordements de contenus. C’est le cas par exemple pour les URL très longues qui « dépassent » du conteneur prévu, ou des noms d’éléments ou de fichiers à télécharger tels que Mon_Joli_PDF_De_Bilans_Comptables_Avec_Previsionnel_Sur_5_ans.pdf.

Depuis 2012, la propriété word-wrap a été remplacée par la propriété overflow-wrap au sein des spécifications CSS3 mais doit demeures compatible sur tous les navigateurs à venir.

Exemple (HTML) :

<p>L'adresse du lien suivant devrait passer à la ligne pour demeurer au sein du paragraphe<br />
  <a href="http://www.Supercalifragilisticexpialidocious.com">http://www.Supercalifragilisticexpialidocious.com</a>
</p>

Partie CSS :

p {
  width: 100px;
  margin: auto;
  padding: 10px;
  background: green;
  color: #fff;
  font-size: 1.2em;  
  word-wrap: break-word;   
}

En résumé, puisque seules les anciennes versions de Firefox antérieures à 3.5 ne reconnaissent pas word-wrap, il s’agit véritablement d’une astuce à appliquer sans modération à toutes les zones de contenu où les visiteurs de votre site web risquent d’interagir : commentaires de blog, sujets et messages d’un forum, blocs de largeur réduite, messagerie privée, zones de texte d’un gestionnaire de contenu, etc.
À noter enfin que word-wrap est une propriété finalisée qui ne nécessite pas de préfixe vendeur pour être interprétée.

Les points de suspension avec text-overflow

Dans certains contextes particuliers, pour ne pas dénaturer la mise en page d’un document, nous sommes amenés à masquer les contenus d’un élément dimensionnés à l’aide de la règle overflow (hidden, scroll ou auto).

Les contenus qui débordent de ce bloc sont alors rognés et invisibles. Il peut être utile de laisser un indice visuel pour indiquer la présence de ce contenu masqué. C’est là qu’intervient la propriété css3 text-overflow : associé à la valeur ellipsis, des points de suspension (…) sont générés à l’endroit où le terme est rogné, mais il est possible de substituer cet indice par un autre de son crû à l’aide de la propriété text-overflow-ellipsis.

Voici comment mettre en œuvre cette propriété :

p {
  width: 200px; /* à modifier selon vos besoins */
  overflow: hidden;
  text-overflow: ellipsis; 
}

En pratique, text-overflow est une propriété très précieuse pour certains contenus spécifiques et volontairement raccourcis, tels qu’un résumé – ou abstract – d’un article, ou des commentaires de visiteurs que l’on ne souhaite pas afficher en totalité sur la page d’accueil.

Note : gardez bien à l'esprit que text-overflow à lui tout seul ne coupe rien du tout, il ne sert qu'à donner une indication (des points de suspension par exemple) sur un texte déjà coupé (via overflow hidden généralement)

Les césures (hyphénation) avec hyphens

La propriétés hyphens n'est supportée que par quelques navigateurs actuellement (Firefox, IE10+ et Safari 5.1+)

Elle va bien plus loin que word-wrap puisque la césure est "intelligente" (elle s’adapte aux règles typographiques de la langue employée) et affiche des traits d’union.

Elle est donc bien pratique, mais encore assez peu supportée (elle nécessite d’ailleurs des préfixes vendeurs).

Voici la propriété hyphens en application :

.bloc { 
  -webkit-hyphens: auto;
  hyphens: auto;
}

Combiner hyphens et word-wrap

En attendant un bon support navigateur, il demeure parfaitement possible de combiner les deux propriétés pour le même élément : les navigateurs reconnaissant hyphens l'appliqueront en priorité; les autres disposeront de l’alternative word-wrap en pis-aller.

Fixer des limites avec max-width

La propriété css2.1 max-width ne vous est sans-doute pas inconnue. Elle détermine une valeur de largeur maximale pour un élément de dimension variable (en pourcentage ou em par exemple) et est souvent employée dans le cas de désigns de largeur fluide.

En pratique, cette fonction est particulièrement utile pour la gestion des contenus récalcitrants : plutôt que de limiter la largeur du bloc parent, nous allons nous en servir pour restreindre les dimensions des éléments internes de contenus. L'avantage est que cette propriété peut s'appliquer sur des éléments tels que des images ou des tableaux de données.

p img {
  max-width: 200px; /* les images seront limitées à 200px de large */
}

Et plus simple encore :

img {
  max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}

Cas des cellules de tableau

Le comportement des cellules de tableaux est souvent radicalement différent des autres éléments du document. Ainsi, dans son modèle de rendu par défaut, le contenu prime et décide de la largeur des cellules et du tableau.

Pour rendre word-wrap et text-overflow fonctionnels sur la majorité des navigateurs, il suffit de mettre en pratique le second mode de rendu des tableaux, mal connu : table-layout: fixed :

table {
  width: 100%; /* à adapter selon vos contraintes */
  table-layout: fixed; 
}

Conclusion

Jusqu'alors frustré par les possibilités restreintes de CSS2, nous pouvons dès à présent profiter des opportunités offertes par CSS3 afin de gérer au mieux les différents cas de dépassements de contenus provoqués par des contributeurs maladroits.

L'avantage étant que même si certaines de ces propriétés ne sont pas encore supportées par tous les navigateurs actuels, nous n'avons aucun risque à les employer puisque le préjudice demeure assez faible en cas de non reconnaissance.