Description

We are currently using a fade to indicate when a page title in the sticky header has been clipped, example (link):

Instead we should switch to using text-overflow: ellipsis. It is a more clear indication that text has been clipped, and it is provided as a built-in CSS feature which I imagine makes the code more simple. Example:

Notes

I apologize for the change in design here. Previously we hadn't reached a decision on the design team as to whether or not ellipsis were an internationally recognizable indication of clipped text. We have now agreed that it is acceptable. In the future CSS may even allow for language-specific overrides of how to handle this property.

QA steps

• Navigate to an article page with a really long title as a logged-in user -- patchdemo link: https://patchdemo.wmflabs.org/wikis/d990d92b37/wiki/Cneoridium_dumosum_(Nuttall)_Hooker_F._Collected_March_26,_1960,_at_an_Elevation_of_about_1450_Meters_on_Cerro_Quemaz%C3%B3n,_15_Miles_South_of_Bah%C3%ADa_de_Los_Angeles,_Baja_California,_M%C3%A9xico,_Apparently_for_a_Southeastward_Range_Extension_of_Some_140_Miles
• Scroll down to see sticky header - note that the title ends in an ellipsis instead of fading out.