防止跨度元件断行

我有一个<span>元素，我想显示没有任何换行。我该怎么做呢?

把这个放在你的CSS中:

white-space:nowrap;

更多信息请访问:http://www.w3.org/wiki/CSS/Properties/white-space

空白

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

值

正常的该值指示用户代理折叠空白序列，并在必要时换行以填充行框。

精准医疗此值可防止用户代理压缩空白序列。行仅在源中的换行处或在生成的内容中出现“\A”时被中断。

nowrap 此值将空格压缩为“normal”，但抑制文本中的换行符。

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

pre-line 该值指示用户代理折叠空白序列。在源中的换行处，在生成的内容中出现“\A”时，以及在必要时填充行框时，行会被打断。

继承获取与元素的父元素的属性相同的指定值。

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

No&nbsp;line&nbsp;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

推荐文章