Steps to replicate the issue (include links if applicable):

• In Firefox or Safari, visit the MenuItem page and look at the "with long title and search query highlighted" example
• Increase or decrease the viewport width until you see the long word overlapping the demo pane border

What happens?:

The long word does not break with a hyphen as it should. Instead, it extends to its full width and, at certain viewport widths, overlaps with the border of the demo pane

Firefox:

Safari:

What should have happened instead?:

The word should break with a hyphen. Here's what it looks like in Chrome:

Software version (skip for WMF-hosted wikis like Wikipedia): Codex main

Other information (browser name/version, screenshots, etc.): Firefox 114.0, Safari 16.5