Broken demo of the <wbr> element

[NoWorries]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Text/Wrapping_breaking_text

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

The demo shows two uses of <wbr />, and the first one is not working:

<div class="box">
  Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch
</div>

What did you expect to see?

Two breaks in the long string.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/guides/text/wrapping_breaking_text
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Text/Wrapping_breaking_text
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/guides/text/wrapping_breaking_text/index.md
• Last commit: 32bdfdb
• Document last modified: 2025-12-15T12:04:53.000Z

[Somya-aa]

Hi! I'd like to work on this issue and submit a fix.
I'll investigate the demo and open a PR once I've verified the problem.

[Somya-aa]

Hi! I tested the example locally and was able to reproduce the expected behavior.

When I reduced the inline-size of the container, the text broke at the first <wbr> as expected. With the current inline-size: 150px, the browser appears to prefer the later break opportunity after pwllgwyngyll, which may make it seem like the first <wbr> is not working.

Could you confirm whether this issue is still reproducible and which browser/version was used for testing?