2

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?

Dancer
  • 17,035
  • 38
  • 129
  • 206
  • 1
    What CSS do you have for that (or any) p tag? Wihout any additional styling it should do what you want. – putvande Jun 24 '15 at 14:50

2 Answers2

3

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?
}
Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
1

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

<nobr>e-newsletter</nobr>

Community
  • 1
  • 1
Snappawapa
  • 1,697
  • 3
  • 20
  • 42