防止跨度元素的换行

Question

我有一个<span>元素,我想显示没有任何换行符.我怎样才能做到这一点？

Answer 1

把它放在你的CSS中:

white-space:nowrap;

white-space

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

值

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

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

nowrap 此值会折叠白色空间,与"正常"相同,但会抑制文本中的换行符.

pre-wrap 此值可防止用户代理折叠空白序列.在生成的内容中出现"\ A"时,在源中的换行处断开行,并根据需要填充行框.

pre-line 此值指示用户代理折叠空白序列.在生成的内容中出现"\ A"时,在源中的换行处断开行,并根据需要填充行框.

inherit 获取与元素父级的属性相同的指定值.

Answer 2

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 3

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

No&nbsp;line&nbsp;break

代替

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