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.