Html 在 span 标签中正确自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2237706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Correct word wrap in a span tag
提问by Sandra
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>
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 中，以美化消息。结果更好，但并不完美。
<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>
What I really want is something like this:
我真正想要的是这样的：
What CSS code would you use to achieve the desired result?
您将使用什么 CSS 代码来实现所需的结果？
回答by wawooca
Try
尝试
white-space: nowrap;
回答by Sandra
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.
我绝对定位跨度并将其向左移动 300px。
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.
这有效，但我对这个解决方案并不完全满意，因为 300px 是硬编码的。如果验证消息前面的东西的长度会改变，我还需要更改 300px。
回答by vrutberg
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.
我能想到的导致 your<div>和<span>tags之间差异的最可能原因是<div>元素被认为是块元素，而<span>元素被认为是内联元素。
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.
如果没有，请尝试一下，我认为它可能会起作用。
回答by graphicdivine
Sometimes, all you need is a <br/>
有时，您只需要一个 <br/>
Bitte geben Sie eine gültige Uhrzeit ein, <br/>zum Beispiel 8:00 oder 14:34
