Correct word wrap in span tag

Question

I have a form with a built-in validation message in between.

<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, word wrapping is really ugly. I can send a verification message to a div to decorate 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> 

I really want something like this:

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

Answer 1

Try

 white-space: nowrap; 

Answer 2

Here is the code I ended up in:

 <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 range absolutely and moved it 300 pixels to the left.

This works, but I'm not completely satisfied with this solution, because 300 pixels are hard-coded. If the length of the material before the validation message changes, I will also need to change the 300px value.

Answer 3

The most likely reason I can think of the difference between the <div> and <span> tags is because the <div> element is considered a block element, and the <span> element is considered inline.

Do you have some kind of wrapper element for floating elements, something similar to this?

 <div class="row"> <div style="float: left;"> <span>Endzeit:</span> </div> <div style="float: left;"> <input type="text" /> <span>10.2.2010</span> </div> <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> </div> 

If not, give it a try, and I think it might work.

Answer 4

Sometimes you only need to <br/>

 Bitte geben Sie eine gültige Uhrzeit ein, <br/>zum Beispiel 8:00 oder 14:34