开发者

Correct word wrap in a span tag

开发者 https://www.devze.com 2022-12-19 14:57 出处:网络
I\'ve a form with an inline validation message in a span. <span id=\"EndTimeErrors\"> <label for=\"EndTime\" class=\"field-validation-error\">

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>

Correct word wrap in a span tag

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 Uhr开发者_JAVA百科zeit ein, zum Beispiel 8:00 oder 14:34
  </label>
</div>

Correct word wrap in a span tag

What I really want is something like this:

Correct word wrap in a span tag

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


Try

white-space: nowrap;


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.


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

Do you have some kind of wrapping element for the floated elements, something that looks like 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, try it and I think it might work.


Sometimes, all you need is a <br/>

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

精彩评论

暂无评论...
验证码 换一张
取 消