Not word breaking after hyphen?

Russinating · 4 Sep 2019 at 15:33

Is this possible? I've got a hyphenated word in an h1 which is word breaking after the hyphen and looks awful. Only thing I can find online is to use 8208; instead, but that displays as underscore on mobile?

touch · 4 Sep 2019 at 15:39

Use a non-breaking space  

edit: sorry, misunderstood that. Non-breaking space is not what you need.

You could add a <span> around it and a "white-space: nowrap" style. Or just add that style to the H1 tags.

Russinating · 4 Sep 2019 at 15:52

touch said:
Use a non-breaking space  

edit: sorry, misunderstood that. Non-breaking space is not what you need.

You could add a <span> around it and a "white-space: nowrap" style. Or just add that style to the H1 tags.

nowrap forces the h1 out of its container. In this scenario anyway!

bremen1874 · 4 Sep 2019 at 15:53

Do you mean 8209 for Unicode non-breaking hyphen? Not sure why it'd cause problems on 'mobile'.

Russinating · 4 Sep 2019 at 16:00

bremen1874 said:
Do you mean 8209 for Unicode non-breaking hyphen? Not sure why it'd cause problems on 'mobile'.

Yeah that's right. And same, but it looks like this on my mobile (Chrome):

bremen1874 · 4 Sep 2019 at 16:03

I'd guess that the font you've chosen to use doesn't render that character correctly. Have a quick test with a different font.

Russinating · 4 Sep 2019 at 16:15

It's Google Fonts' Raleway. I guess no point in me testing another because that's the font that needs using, so if it doesn't work it doesn't work!

touch · 4 Sep 2019 at 16:33

what happens if you put a span around the "in-house" text only and make that no-wrap?

Russinating · 4 Sep 2019 at 16:49

touch said:
what happens if you put a span around the "in-house" text only and make that no-wrap?

Bingo! Thanks

nicho12 · 16 Sep 2019 at 11:59

Neat. For reference check Mozilla MDN there are other options available such as

Code:

whitespace: pre

which will break on new lines or br tags and afford more control if you want it.