Le titre de la page non défilée a été corrigé de manière simple. Ce titre peut se répartir sur plusieurs lignes, donc le débordement n’était présent que pour empêcher les longs mots non coupés de dépasser la largeur. Supprimer le débordement et ajouter overflow-wrap: break-word; permettra de couper les mots lorsqu’il n’y a pas assez d’espace.
Lorsque le titre s’ancre à l’en-tête au défilement, nous utilisons overflow: hidden avec text-overflow: ellipsis pour tronquer les titres plus longs qu’une ligne… nous ne pouvons pas aussi facilement supprimer le débordement ici, j’ai donc ajouté un peu de remplissage et réaligné à gauche avec une marge négative. Ce n’est pas le CSS le plus élégant, mais cela fonctionne.
Un peu plus de détails sur pourquoi cela se produit. Dans une police, il existe le concept de boîte em (aussi appelée carré em). Ces boîtes ont la même taille pour chaque caractère et servent de base pour l’échelle, l’ajustement de la hauteur de ligne, l’espacement des lettres, etc.
Les caractères peuvent dépasser de la boîte em dans n’importe quelle direction… parfois c’est nécessaire pour certains caractères, parfois c’est simplement ce que le concepteur de la police a voulu faire. Dans le navigateur, il n’y a aucun moyen de détecter l’existence de ce contenu débordant, donc rien ne peut être fait pour en tenir compte dynamiquement.
Pour autant que je sache, les seules options sont d’éviter le débordement du texte lorsque c’est possible ou d’ajouter un peu de remplissage supplémentaire lorsque ce n’est pas possible.