避免html元素之间的换行符

Question

我有这个<td>元素:

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

我希望将它保持在一条线上,但这就是我得到的:

在此输入图像描述

如您所见,标志和电话号码分开.该 是电话号码的数字之间的工作中,但没有标志和电话号码之间.

如何确保渲染器不引入任何换行符？

Answer 1

有几种方法可以防止内容中的换行符.使用 是一种方式,并且在单词之间工作正常,但在空元素和某些文本之间使用它没有明确定义的效果.这同样适用于使用图像作为图标的更合理且更易于访问的方法.

最强大的替代方法是使用nobr标记,这是非标准但普遍支持的,即使在禁用CSS时也能正常工作:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

( 在这种情况下,您可以(但不必)使用而不是空格.)

另一种方式是nowrap属性(已弃用/已过时,但仍然可以正常工作,除了一些罕见的怪癖):

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

然后是CSS方式,它在支持CSS的浏览器中工作,需要更多代码:

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

`nobr`标签与使用`blink`属于同一类别:http://www.w3.org/TR/html5/obsolete.html#obsolete要么你努力达到网络标准,要么你努力建立一个混乱的网络.这是你的选择. (19认同)
Re:nobr,mozilla警告说"这个功能是非标准的,不在标准轨道上.不要在面向Web的生产站点上使用它:它不适用于每个用户.实现和实现之间也可能存在很大的不兼容性行为可能在未来发生变化." - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr (13认同)
如果您使用的是bootstrap,则已经定义了一个类"text-nowrap",它会相应地设置stype. (5认同)
@ JukkaK.Korpela,HTML5现已最终确定,并且毫不奇怪,`nobr`仍然被弃用,_"不得使用"_. (3认同)

Answer 2

那个td的CSS white-space: nowrap;应该解决它.

Answer 3

如果您需要为多个单词或元素使用它，但不能将其应用于整个 TD 或类似内容，则可以使用 Span 标签。

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

如果您使用课堂版本，请记住按照已接受的答案中的详细说明设置 CSS。