Правильный перенос слов в теге span

Question

У меня есть форма с встроенным сообщением проверки в промежутке.

<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>

К сожалению, перенос слов действительно ужасен. Я мог бы поместить сообщение проверки в 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>

Что я действительно хочу, так это:

Какой код CSS вы бы использовали для достижения желаемого результата?

Answer 1

Попробуйте

white-space: nowrap;

Answer 2

Вот код, с которым я закончил:

<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>

Я разместил диапазон абсолютно и переместил его на 300 пикселей влево.

Это работает, но я не совсем доволен этим решением, потому что 300px жестко запрограммированы. Если длина содержимого перед сообщением проверки изменится, мне также нужно изменить 300px.

Answer 3

Иногда все, что вам нужно, это <br/>

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

Answer 4

Наиболее вероятная причина возникновения различий между вашими тегами <div> и <span> состоит в том, что элемент <div> считается блочным элементом, а элемент <span> считается встроенным.

У вас есть какой-нибудь элемент обёртки для плавающих элементов, что-то похожее на это?

<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>

Если нет, попробуйте, и я думаю, что это может сработать.