Html 防止跨度元素换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7300760/
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
Prevent line-break of span element
提问by Randomblue
I have a <span>element which I want to display without any line break. How can I do that?
我有一个<span>要在没有任何换行符的情况下显示的元素。我怎样才能做到这一点？
回答by Daan
Put this in your CSS:
把它放在你的 CSS 中：
white-space:nowrap;
Get more information here: http://www.w3.org/wiki/CSS/Properties/white-space
在此处获取更多信息：http: //www.w3.org/wiki/CSS/Properties/white-space
white-space
white-space
The white-spaceproperty declares how white space inside the element is handled.
该white-space属性声明如何处理元素内的空白。
Values
价值观
normalThis value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.
normal该值指示用户代理折叠空白序列，并根据需要中断行以填充行框。
preThis value prevents user agents from collapsing sequences of white space. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content.
pre此值可防止用户代理折叠空白序列。仅在源中的换行符处或在生成的内容中出现“\A”时换行。
nowrapThis value collapses white space as for 'normal', but suppresses line breaks within text.
nowrap此值会像“正常”一样折叠空白，但会抑制文本中的换行符。
pre-wrapThis value prevents user agents from collapsing sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.
pre-wrap此值可防止用户代理折叠空白序列。在源代码中的换行符处、在生成的内容中出现“\A”处以及在必要时填充行框时换行。
pre-lineThis value directs user agents to collapse sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.
pre-line该值指示用户代理折叠空白序列。在源代码中的换行符处、在生成的内容中出现“\A”处以及在必要时填充行框时换行。
inheritTakes the same specified value as the property for the element's parent.
inherit采用与元素父级属性相同的指定值。
回答by Brent Washburne
If you only need to prevent line-breaks on space characters, you can use entities between words:
如果您只需要防止空格字符换行，则可以 在单词之间使用实体：
No line break
instead of
代替
<span style="white-space:nowrap">No line break</span>
回答by Mr. Perfectionist
With Bootstrap 4 Class:
使用 Bootstrap 4 类：
text-nowrap
Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
参考：https: //getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
回答by wortwart
white-space: nowrapis the correct solution but it will prevent any break in a line. If you only want to prevent line breaks between two elements it gets a bit more complicated:
white-space: nowrap是正确的解决方案，但它会防止任何断线。如果你只想防止两个元素之间的换行，它会变得有点复杂：
<p>
<span class="text">Some text</span>
<span class="icon"></span>
</p>
To prevent breaks between the spans but to allow breaks between "Some" and "text" can be done by:
为了防止跨度之间的中断但允许“某些”和“文本”之间的中断，可以通过以下方式完成：
p {
white-space: nowrap;
}
.text {
white-space: normal;
}
That's good enough for Firefox. In Chrome you additionally need to replace the whitespace between the spans with an . (Removing the whitespace doesn't work.)
这对 Firefox 来说已经足够了。在 Chrome 中，您还需要将跨度之间的空格替换为 . （删除空格不起作用。）
