This is because of the:

white-space: nowrap;

We also had to override this in GettingStarted (GettingStarted has overrides for other reasons, e.g. icons, but the buttons are still generally button-looking).

I'm not sure if the 'nowrap' is necessary in other scenarios.

I thought perhaps white-space: nowrap is there to stop a mw-ui-button wrapping onto a new line, but in Firefox mw-ui-button's display:inline-block keeps that from happening without a white-space setting, even if you style a span:

<span class="mw-ui-button">This is a lot of text that should stay together</span>

If there's a reason for nowrap, please add a comment to buttons.less

(In reply to comment #0)

We're using the mediawiki.ui button class for the Flow topic header area (for
now, anyway), and this is what happens when the topic title text is too long:
https://www.mediawiki.org/w/index.php?title=Talk:
Flow&topic%5BpostId%5D=050f54b98b3d662828ca90b11c28d444&workflow=050f54b98b3d
662828ca90b11c28d444

This is truly an incredible abuse of the button class, and clearly a very bad idea given how many issues it causes (I've seen a few other mentions apart from this bug). Still, the white-space: nowrap is inappropriate.

Change 110696 had a related patch set uploaded by Bartosz Dziewoński:
mediawiki.ui: Remove white-space: nowrap; for buttons

https://gerrit.wikimedia.org/r/110696

Change 110696 merged by jenkins-bot:
mediawiki.ui: Remove white-space: nowrap; for buttons

https://gerrit.wikimedia.org/r/110696

This disappeared for awhile in Flow, but it seems to have resurfaced on our Labs test wiki. See the first topic title here: http://ee-flow.wmflabs.org/wiki/User_talk:Maryana

Not sure if the code there is out of date or if this bug is back.

ee-flow is now on 1.23wmf12, which is no longer deployed to any WMF wiki. The fix is deployed to all WMF wikis.