Prevent a hyphenated word causing a line break in IOS

Question

I have an odd issue, which only recently came to light.

Our database produces a list of sizes for products (e.g: Small, Medium, Large etc..)

There are also a number of sizes which are hyphenated (2-3YR, 4-5YR).

The sizes with hyphens show properly on most devices, but on IOS they look like this:

2-
3YR

4-
5YR

So IOS is breaking the line after the hyphen. I can't remove or change the hyphen as it's server generated, so is there any way to prevent this with CSS?

Answer 1

Thanks for the comments. display: inline-block didn't work for some reason. However I did find a JS workaround:

I used the following to substitute the hyphen after the page loads with a non-breaking hyphen, which seems a little akin to using a sledgehammer to kill a fly, but it works!

 var str = elements[i].innerHTML;
  var text = str.replace("-", "‑");
  elements[i].innerHTML = text;

Answer 2

I recently ran into this issue and was experiencing it in ios chrome and macos safari.

Simply apply the following CSS to your element containing the breaking text:

word-break: keep-all;

Answer 3

set min-width: fit-content; to your text element ;) it worked for me.