防止跨度元件断行

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

214931 次浏览
小开
最佳答案

把这个放在你的CSS中:

white-space:nowrap;

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

white-space

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

值

< p > normal 这个值指示用户代理折叠空白序列，并在必要时换行以填充行框 < p > pre 此值可防止用户代理压缩空白序列。只有在源文件中的换行处，或者在生成的内容中出现“\A”时，行才会被打断

< >强nowrap 这个值将空格折叠为'normal'，但抑制文本中的换行符 < p > pre-wrap 此值可防止用户代理压缩空白序列。在源文件中的换行处，在生成的内容中出现“\A”时，以及在必要时填充行框时，行被打断 < p > pre-line 该值指示用户代理折叠空白序列。在源文件中的换行处，在生成的内容中出现“\A”时，以及在必要时填充行框时，行被打断 < p > inherit 获取与元素父元素属性相同的指定值

小开

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

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中，你还需要用&nbsp;替换span之间的空白。(删除空格无效。)

小开

与Bootstrap 4类:

text-nowrap

裁判:https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow


提交答案