Question

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

Answer 1

把它放在你的CSS中：

white-space:nowrap;

white-space

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

<强>值

normal 此值指示用户代理折叠空白序列，并根据需要断行以填充行框。

pre 此值可防止用户代理折叠空白序列。只有在源中的换行符处或在出现＆＃34; \ A＆＃34;时才会断行。在生成的内容中。

<强> nowrap 此值会折叠空格以及“正常”，但会抑制文本中的换行符。

pre-wrap 此值可防止用户代理折叠空白序列。出现在＆＃34; \ A＆＃34;在生成的内容中，并根据需要填充行框。

pre-line 此值指示用户代理折叠空白序列。出现在＆＃34; \ A＆＃34;在生成的内容中，并根据需要填充行框。

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

Answer 2

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

No&nbsp;line&nbsp;break

而不是

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

Answer 3

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中，您还需要用 替换跨度之间的空格。（删除空格无效。）

Answer 4

使用Bootstrap 4类：

text-nowrap