Correct word wrap in a span tag

Question

I've a form with an inline validation message in a span.

<span id="EndTimeErrors">
  <label for="EndTime" class="field-validation-error">
      Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34
  </label>
</span>

Unfortunately the word wrap is really ugly. I could put the validation message in a div, to beautify the message. The result is better, but not perfect.

<div id="EndTimeErrors">
  <label for="EndTime" class="field-validation-error">
      Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34
  </label>
</div>

What I really want is something like this:

What CSS code would you use to achieve the desired result?

Solution 1

Try

white-space: nowrap;

Solution 2

Here is the code I ended up with:

<span id="EndTimeErrors" style="position: absolute; left: 300px;">
  <label for="EndTime" class="field-validation-error">
      Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34
  </label>
</span>

I positioned the span absolutely and moved it 300px to the left.

This works, but I'm not totally satisfied with this solution, because the 300px are hard-coded. If the length of stuff in front of the validation message would change, I would also need to change the 300px.