4

I needed a non-breaking hyphen in a webpage, so I used it:

foo‑bar

Everything worked ok when I tested it on my laptop, on both Firefox and Chromium. When the site was ready, I finally tested it on a mobile phone.

It came out that the Android browsers based on Chromium - the default Samsung Marshmallow browser and CyanogenMod's Gello both display the non-breaking hyphen as an underscore instead.

How should I handle this? Bug reports in such big projects take forever until resolved and I want my webpage to display properly on mobiles.

marmistrz
  • 5,974
  • 10
  • 42
  • 94

2 Answers2

2

I ran into this as well. One thing I discovered is that it was unique to the font we are using. The non-breaking hyphen would get converted to an underscore on Android if we were using the freight-text-pro font, but not another font. You can try switching fonts or try <span style="white-space: nowrap;">hyphenated-word</span> and use a regular hyphen instead.

codewhispurrer
  • 46
  • 4
  • This help figure it out for us. Alternately, we changed the font of the nb-hyphen to Ariel. `foo – Jeff Aug 23 '18 at 15:38
0

Have you fixed the problem? Could you use

&ndash;

As a substitute?

Trevor Yokum
  • 152
  • 1
  • 10
  • Unfortunately, that allows for line breaking if the word you're trying to NOT have break appears near the end of a line. The non-breaking hyphen resolves that by not breaking. – Will Lanni Apr 18 '19 at 01:12