كان عنوان الصفحة قبل التمرير إصلاحًا مباشرًا. يمكن أن ينحني هذا العنوان إلى سطور متعددة، لذا كان التدفق الزائد موجودًا فقط لمنع الكلمات الطويلة غير المقسمة من كسر العرض. إزالة التدفق الزائد وإضافة overflow-wrap: break-word; سيقوم بكسر الكلمات عندما لا يكون هناك مساحة كافية.
عندما يرسو العنوان في الرأس أثناء التمرير، نستخدم overflow: hidden مع text-overflow: ellipsis لاختصار العناوين التي تزيد عن سطر واحد… لا يمكننا إزالة التدفق الزائد هناك بسهولة، لذا أضفت بعض الحشو وأعدت المحاذاة إلى اليسار باستخدام هامش سلبي. ليس هذا تنسيق CSS الأنيق، لكنه يعمل.
تفاصيل أكثر قليلاً عن لماذا يحدث هذا. داخل الخط، يوجد مفهوم مربع الإيم (يُسمى أيضًا مربع الإيم). هذه المربعات لها نفس الحجم لكل حرف وتُستخدم كأساس للتوسع، وتعديل ارتفاع السطر، والمسافة بين الحروف، وما إلى ذلك.
يمكن أن تمتد الأحرف خارج مربع الإيم في أي اتجاه… أحيانًا يكون ذلك ضروريًا لبعض الأحرف، وأحيانًا يكون مجرد ما أراد مصمم الخط فعله. في المتصفح، لا توجد طريقة لمعرفة وجود محتوى زائد عن الحد، لذا لا يمكن فعل أي شيء لحساب ذلك ديناميكيًا.
حسب علمي، الخيارات الوحيدة هي تجنب التدفق الزائد على النص عندما يكون ذلك ممكنًا، أو إضافة بعض الحشو الإضافي عندما لا يكون ذلك ممكنًا.