2

Similar but different to this question: How to stop an em dash from wrapping by itself?

I have a large website, with a lot of H1s. At the end of these headings there has to be an em dash (with no letter space between the last letter and the em dash).

I have the current code, but when the browser window is made smaller the line of text breaks before the hyphen - moving the hypen to a new line. This obviously looks terrible. Is there a way to stop this, so that the last word and the em dash move to a new line? Without having to add in span around the last word (see other post)?

h1::after {
    content: "\2014";
    white-space: nowrap;
    }

I'm not even sure how to add the em dash: is "/2014" the correct way to do this?

I'm using a Mac. Firefox and Safari don't break before the em dash, but Chrome does!

user2991837
  • 626
  • 1
  • 8
  • 17
  • Use a non-breaking hyphen? But your current methodology of adding the symbol won't work. – Paulie_D Jan 15 '20 at 11:39
  • @Paulie_D it needs to be the longer em dash rather than a hyphen / en dash. Although with negative letter-spacing I suppose I could use two non-breaking hyphens to give the same look. Thank you I'll look into that – user2991837 Jan 15 '20 at 11:41
  • @Paulie_D how do I add a non-breaking hypen using h1::after ? – user2991837 Jan 15 '20 at 11:43

1 Answers1

1

Make it with a width equal to 0 and consider some margin to rectify the overflow:

h1::after {
  content: "\2014";
  display:inline-block;
  width:0;
}
h1 {
  margin-right:1em;
}
<h1>XYZ consultancy is super great and brilliant</h1>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415