正确的自动换行范围标记

我有一个带有内部验证消息的表单。正确的自动换行范围标记

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

Ugly wrap with 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>

Using a div

我真正想要的是这样的：

Mockup of goal

你会用什么CSS代码，以达到预期的效果？

来源

2010-02-10 Sandra

尝试

white-space: nowrap;

来源

2010-02-10 15:03:24 wawooca

谢谢！这给了我像使用div而不是跨度一样的结果。它看起来比跨度好，但并不完美。 – Sandra 2010-02-10 15:24:13

迄今为止最优雅的解决方案。 – Chris 2012-06-16 02:04:10

非常适合让您的内容飞离屏幕边缘！不要忘记使用'显示：块' – JackalopeZero 2016-02-03 17:44:19

最可能的原因，我能想到导致您<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>

如果没有，试试看，我认为它可能工作。

来源

2010-02-10 15:08:18 vrutberg

使用几个div并浮动它们会工作，但我想避免太多的div盒。我希望能有一个CSS样式，使我能够使用跨度。文本应该从跨度在第一行开始的位置开始，而不是在第二行的开始。 – Sandra 2010-02-10 15:22:51

有时候，你需要的是一个<br/>

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

来源

2010-02-10 15:36:33 graphicdivine

我添加了一个br，并且在Firefox 3.57中，两行的开头仍然没有对齐。
控制换行符的位置，但不幸的是，它不控制新行的起始位置。 – Sandra 2010-02-10 15:52:41

我明白了。可行的是，将display：inline-block放在包含标签上。 – graphicdivine 2010-02-10 16:06:44

这里是我结束了与代码：

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

来源

2010-02-10 16:01:35 Sandra

正确的自动换行范围标记

回答

相关问题