Titres sur une ligne — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 5)

Titres sur une ligne

Le modèle de boîte · niveau 2

Énoncé

Dans la liste du catalogue, les titres de livres doivent tenir sur une seule ligne, quitte à finir par « … ». Écrire la règle .titre pour une carte de 16 rem de large et 1 rem de rembourrage. Quelle est la largeur du titre ? Que se passe-t-il si l'on oublie l'une des trois déclarations ?

Corrigé


body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.carte {
  width: 16rem;
  padding: 1rem;
  border: 1px solid #e2d8c9;
}

.titre {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

En content-box, le contenu de la carte, donc la largeur du titre, est 16 rem, soit 256 pixels ; le titre complet en demanderait 423 (scrollWidth mesuré dans Chromium).

sans white-space: nowrap, le titre passe à la ligne et ne déborde pas : rien n'est coupé ;
sans overflow: hidden, le texte déborde de la carte, sans points de suspension ;
sans text-overflow: ellipsis, le texte est coupé net, parfois au milieu d'une lettre.