How to stop an em dash from wrapping by itself?

Question

I have a heading. At the end of the last word of the heading is an em dash (there is no white space between the word and the em dash).

When the browser window is made smaller the em dash breaks and goes on to a new line. Having an em dash on its own line is bad typography.

How do I stop the line breaking before the dash (so that the last word runs on to the new line)?

Here is the code:

<h1>XYZ consultancy is super great and brilliant&mdash;</h1>

I've tried wrapping the last word and the em dash in a span with white-space: nowrap;. It works on my computer, but I can't understand why this is the case as there is no white space and I'm concerned that it won't work on all browsers.

I can't use a non-breaking hyphen, because it needs to be an em dash and I don't think there is a non-breaking em dash.

Thanks

Michael Benjamin · Accepted Answer · 2017-06-23T15:27:02.193

This works across browsers:

span { white-space: nowrap }

<h1>XYZ consultancy is super great and <span>brilliant&mdash;</span></h1>

You wrote:

I've tried wrapping the last word and the em dash in a span with white-space: nowrap;. It works on my computer, but I can't understand why this is the case as there is no white space and I'm concerned that it won't work on all browsers.

You're overthinking it (or taking it too literally). The nowrap value of the white-space property prevents text wrapping. That's what it does. Plain and simple.

From MDN:

nowrap

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

score 1 · Answer 2 · answered Jun 23 '17 at 13:45

1

If you have complete control over the content of the H1 tag you could wrap the word and em dash in an inline-block span.

<h1>XYZ consultancy is super great and <span style="display:inline-block;">brilliant&mdash;</span></h1>

answered Jun 23 '17 at 13:45

WizardCoder

3,353
9
20

score 0 · Answer 3 · answered Jun 23 '17 at 13:48

0

You could try using the solution here which is to wrap the text you don't want to break like this:

<h1>XYZ consultancy is super great and <nobr>brilliant&mdash;</nobr></h1>

Hopefully that works for you!

answered Jun 23 '17 at 13:48

Monkeybrews

66
1
6

The nobr tag is not standard, and strongly discouraged by the W3C. See w3.org/TR/html5/obsolete.html#non-conforming-features – WizardCoder Jun 23 '17 at 13:49
That is true @WizardCoder, I just wanted to give OP other potential solutions to the issue. – Monkeybrews Jun 23 '17 at 13:50
I know, it's good to show multiple solutions to problems. I just thought it would be good for people to know potential issues with using `` if they didn't click on your link. – WizardCoder Jun 23 '17 at 13:55

score 0 · Answer 4 · answered Jun 23 '17 at 13:52

Create a simple class and pseudo-element that will encapsulate the nowrap, and the symbol. Now you can apply the class to a span on the element:

.emdash {
  white-space: nowrap;
}

.emdash::after {
  content: "\2014";
}

<h1>XYZ consultancy is super great and <span class="emdash">brilliant</span></h1>

How to stop an em dash from wrapping by itself?

4 Answers4

Linked