Il titolo della pagina non scorrevole era una correzione semplice. Quel titolo può andare a capo su più righe, quindi l’overflow era presente solo per evitare che parole lunghe senza spazi spezzassero la larghezza. Rimuovendo l’overflow e aggiungendo overflow-wrap: break-word;, le parole verranno interrotte quando non c’è abbastanza spazio.
Quando il titolo si aggancia all’intestazione durante lo scorrimento, utilizziamo overflow: hidden insieme a text-overflow: ellipsis per troncare i titoli più lunghi di una riga… non possiamo rimuovere l’overflow così facilmente in quel caso, quindi ho aggiunto un po’ di padding e riallineato a sinistra con un margine negativo. Non è il CSS più elegante, ma funziona.
Un po’ più di dettagli sul perché questo accade. All’interno di un font esiste il concetto di em-box (chiamata anche em-square). Queste box hanno la stessa dimensione per ogni carattere e servono come base per il ridimensionamento, l’aggiustamento dell’altezza di riga, la spaziatura delle lettere, ecc.
I caratteri possono estendersi oltre l’em-box in qualsiasi direzione… a volte è necessario per certi caratteri, altre volte è semplicemente ciò che il progettista del font ha voluto fare. Nel browser non c’è modo di rilevare l’esistenza di questo contenuto in overflow, quindi non è possibile fare nulla per tenerne conto dinamicamente.
Per quanto ne sappia, le uniche opzioni sono evitare l’overflow sul testo quando possibile o aggiungere un po’ di padding aggiuntivo quando non si può.