Заголовок страницы до прокрутки был исправлен довольно просто. Этот заголовок может переноситься на несколько строк, поэтому свойство overflow было добавлено лишь для предотвращения разрыва длинных слов без пробелов, нарушающих ширину. Убрав overflow и добавив overflow-wrap: break-word;, мы добьёмся переноса слов, когда места недостаточно.
Когда заголовок прилипает к шапке при прокрутке, мы используем overflow: hidden вместе с text-overflow: ellipsis, чтобы обрезать заголовки, превышающие одну строку… убрать overflow там сложнее, поэтому я добавил немного отступов и выровнял по левому краю с помощью отрицательного поля. Это не самый красивый CSS, но работает.
Немного подробнее о том, почему это происходит. В шрифте существует понятие «эмм-бокс» (также называемое «эмм-квадрат»). Эти блоки имеют одинаковый размер для каждого символа и служат основой для масштабирования, настройки межстрочного интервала, межбуквенного интервала и т. д.
Символы могут выходить за пределы эмм-бокса в любом направлении… иногда это необходимо для определённых символов, иногда это просто задумка дизайнера шрифта. В браузере нет способа узнать о существовании такого переполненного контента, поэтому динамически учесть его невозможно.
Насколько мне известно, единственные варианты — избегать переполнения текста, когда это возможно, или добавлять немного дополнительного отступа, когда это сделать нельзя.