Firefox and seems to render a hyphen followed by differently to other browsers. Here is some test code that demonstrates the problem:
<html>
<body>
<div style="border: 1px solid blue;width: 50px">
This text can break. Do not - break this text.
</div>
</body>
</html>
Notice how in Firefox the second sentence does not break, but in Chrome and IE it breaks at the hyphen.
Does anyone know a good workaround so that the break does not occur?
The problem is that the "minus" sign in your code allows breaking.
There are lots of ways how you can write a "horizontal line" in HTML. –, —, -. There is "A list apart" article describing all the possible ways.
But also several specific Unicode characters exist which can be used by their code point numbers. One of them is a "non-breaking hyphen", which can be written like this: ‑.
I tried using it in your example and now the text does not break.
Naivist has the answer, but, for the record, I ended up using CSS's white-space: nowrap;