<wbr> tag not supported in Mac Firefox

The <wbr> tag is a nifty piece of markup introduced in HTML5 that specifies where in a text it would be okay to add a line-break. So, if I had a long string like “Military Man (Rigid Foam Body)”, I can mark it up like:

Military Man<wbr>(Rigid Foam Body)

If the area containing that text is too narrow to fit the entire string, it will break into 2 lines at the location of the <wbr> tag.

Unfortunately, Firefox on Macs do not support the <wbr> tag. To overcome this, I added the following lines to my stylesheet:

@-moz-document url-prefix(){
    wbr{ display: block; }

It’s essentially a media query that isolates the Firefox browser. Now, in Firefox, the text will always be on 2 lines. This unfortunately affects Firefox on PCs (which does support the <wbr> tag), but in my use case it was an acceptable sacrifice to maintain the desired functionality on Chrome, Safari, and Edge.