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

我绝对定位了跨度并向左移动了300px。

这有效，但我对这个解决方案并不完全满意，因为300px是硬编码的。如果验证消息前面的内容长度发生变化，我还需要更改300px。

Answer 3

我可以想到导致<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>

如果没有，请尝试一下，我认为它可能有用。

Answer 4

有时，您只需要<br/>

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