防止span元素换行

Question

我有一个<span>元素，我想将其显示在同一行上而不是换行。我该如何实现？

- Randomblue

---

.word { 显示：内联块; 垂直对齐：顶部; } - AliNajafZadeh

这个“重复”的问题目前在谷歌上的排名比它的“原始”版本更高。有人叫一下 Stack Exchange 警察。 - Mentalist

我遇到了一个描述不正确的问题，因为我试图防止一系列span中的换行，但允许span在同一行显示。@AliNajafZadeh的回答让我找到了解决方法，在<p>中使用一系列<span class="unbreakable">和.unbreakable { display: inline-block;}就解决了问题。 谢谢@AliNajafZadeh。 - undefined

Answer 1

将以下代码放入您的CSS中：

white-space:nowrap;

获取更多信息请点击这里：http://www.w3.org/wiki/CSS/Properties/white-space

white-space

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

取值

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

pre 此值防止用户代理折叠空白序列。行仅在源文本中的换行符或生成内容中的"\A"出现时被换行。

nowrap 此值与'normal'一样折叠空白，但在文本内不允许换行。

pre-wrap 此值防止用户代理折叠空白序列。行在源文本中的换行符或生成内容中的"\A"出现时被换行，在必要时也会填充行框。

pre-line 此值指示用户代理折叠空白序列。行在源文本中的换行符或生成内容中的"\A"出现时被换行，在必要时也会填充行框。

inherit 使用与元素父级相同的属性值。

- Daan

---

还可以在这里添加更多的文档：http://www.w3.org/wiki/CSS/Properties/white-space - Justus Romijn

如果您在<div>标签中有多个<span>标签，并且想要实现单行<span>而不是单行<div>，则还需要将<span>标签的"display"属性设置为"inline-block"。希望这能帮到某些人。 - walv

Answer 2

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

No line break

取代

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

- Brent Washburne

Answer 3

white-space: nowrap 是正确的解决方案，但它会阻止在一行中发生任何换行。如果您只想要防止两个元素之间发生换行，则会变得有点复杂：

white-space: nowrap 是正确的解决方案，但这将防止文本在同一行内换行。如果您只需要防止两个元素之间出现换行，则需要更复杂的方法:

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

为了避免跨度之间的断点，但又允许在“Some”和“text”之间出现断点，可以采取以下措施： Some text

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

这对于Firefox已经足够好了。在Chrome中，你还需要使用 替换跨度之间的空格。（删除空格是不起作用的。）

- wortwart

Answer 4

使用 Bootstrap 4 类：

text-nowrap

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

- Mr. Perfectionist