防止跨度元素换行

我有一个<span>要显示的元素，没有任何换行符。我怎样才能做到这一点？

将其放在您的CSS中：

white-space:nowrap;

在此处获取更多信息：http : //www.w3.org/wiki/CSS/Properties/white-space

white-space

该white-space属性声明如何处理元素内的空白。

价值观

normal 该值指导用户代理折叠空白序列，并在必要时中断行以填充行框。

pre 此值可防止用户代理折叠空白序列。行仅在源中的换行处或在生成的内容中出现“ \ A”时才断开。

nowrap 该值与“正常”一样折叠空白，但抑制文本内的换行符。

pre-wrap 此值可防止用户代理折叠空白序列。在源代码中的换行处，在生成的内容中出现“ \ A”时以及需要填充行框时，这些行都被打断。

pre-line 该值指导用户代理折叠空白序列。在源代码中的换行处，在生成的内容中出现“ \ A”时以及需要填充行框时，这些行都是断开的。

inherit 采用与元素父级属性相同的指定值。

如果只需要防止空格字符换行，则可以 在单词之间使用实体：

No line break

代替

<span style="white-space:nowrap">No line break</span>

white-space: nowrap是正确的解决方案，但可以防止任何中断。如果只想防止两个元素之间的换行，则会变得更加复杂：

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

为了防止跨度之间的中断，但要允许“ Some”和“ text”之间的中断，可以通过以下方法完成：

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

对于Firefox来说已经足够了。在Chrome浏览器中，您还需要用替换跨度之间的空格 。（删除空格无效。）

对于Bootstrap 4类：

text-nowrap

参考：https : //getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow