The theory is that a horizontal scrollbar is much worse than a word that's broken up at a wrong position. CSS gives us tools to avoid scrollbars without hiding content, so let's use them.
Examples:
<ref>Foobarfoobarfoobarfoobarfoobarfoobarfoobarfoobarfoobarfoobarfoobarfoobarfoobarfoobarfoobar</ref> <ref>Foo bar foo bar foo bar foo bar foo bar</ref> <ref><span style="white-space: nowrap;">Foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</span></ref> <ref><span style="white-space: pre;">Foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</span></ref>
Briefly discusses here: T265482#6588133