HTML - Text flow

Question

We have a responsive website with a block containing the phrase 'for the chance of winning X - sign up to our e-newsletter" in a p tag.

Annoyingly at a certain resolution we see 'e-' on one line and 'newsletter' on the next - my question is whether its possible for the hyphen to be classed as part of the word - so it would break onto the next line as a whole rather than in part (as a standard word would do)?

Any ideas?

Answer 1

Here's what I would do ;)

Wrap a span tag around the word you would like to control uniquely:

<span class="e">e-newsletter</span>

Now you have it as it's own element, with a selector to do what you'd like with!

.e { 
   // display inline-block perhaps?
   // give it a set width maybe?
}

Answer 2

A way I would consider is the <nobr></nobr> tag: How to prevent line break at hyphens on all browsers

<nobr>e-newsletter</nobr>