1

I have some text that contains hyphen (-). When the text is long enough to not fit in the container, it is wrapped.

When a hyphenated word is encountered towards the end of the line, all major browsers except Firefox break that hyphenated word on the hyphen.

I want to keep the Firefox behavior across my target browsers (Opera, Safari, Chrome, IE9+(good-to-have))

On Firefox, the behavior is seen even on resizing. Here is the markup:

<h2>Testing awesome hyphens  vvvcsvdcsacscsaccccc asvcvadcvdvv-ysys sdcvsdvavv</h2>

h2 { font-size: 2em; margin: 15px 0 10px; }

Here is my jsfiddle. Open it in Firefox v/s other browsers to see different behaviors.(Resize the containers as required)

Thanks for any pointers!

Vikram
  • 4,162
  • 8
  • 43
  • 65
  • The question is about *allowing* line break, not preventing it. – Jukka K. Korpela Feb 14 '14 at 17:32
  • @JukkaK.Korpela yes that's correct...I want to allow breaks as the text is almost certainly going to exceed its containers' width..I just dont want word to break line on hyphen – Vikram Feb 14 '14 at 17:59
  • Actually I first misread the question (perhaps due to its title). This is about preventing line break after a hyphen, and it is indeed a duplicate. – Jukka K. Korpela Feb 14 '14 at 18:06
  • My apologies...I agree it is a duplicate..guess I have to replace any hyphenated text in that container with a non-breaking hyphen (HTML: ‑) as suggested here: http://stackoverflow.com/a/8753317/405117 – Vikram Feb 14 '14 at 18:30
  • I have voted to close – Vikram Feb 14 '14 at 18:31

0 Answers0