See Word breaking and hyphenation is overly aggressive.
- Enable Vector and disable "Use Legacy Vector" at the preferences from any Wikimedia project, e.g. Wikipedia, while logged in.
- Enter a long term with long words in the search box at the top of pages, e.g. supercalifragilisticexpialidocious pseudopseudohypoparathyroidism antidisestablishmentarianism honorificabilitudinitatibus
- Look for a box right below the search box saying "Search for pages containing", followed by the search term. It is multiple lines when Legacy Vector is disabled. Your browser will probably break some long words into two lines and place a hyphen at the end of the first line.
- The box has the class wvui-typeahead-search__suggestions__footer__text__query
Words breaking with a hyphen which is unavoidable in Safari (on Mac) if this is added to one's custom CSS:
.wvui-typeahead-search__suggestions__footer__text__query {
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
}All three are sometimes recommended, e.g. at W3 Schools, presumably to cover more circumstances. One only needs hyphens: none !important to avoid the word breaks in Firefox and Google Chrome
My suggestion is
- to fix the breaking issue on Safari.
- to create some sort of horizontal scroll control if the word could not be displayed in one line.
This issue has been already raised on the technical village pump and another admin redirected me to here.