避免在html元素之间换行

问题描述

我有这个< td> 元素：

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

我希望将它保留在一行中，但这是我得到的结果：

正如您所看到的，标志和电话号码分开。 & nbsp; 在电话号码之间工作，但不在标志和电话号码之间。

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

解决方案

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

最强大的替代方法是使用 nobr 标记，这是非标准的，但通用支持，即使在禁用CSS时也可以使用：

 < td> ;< nobr>< i class =flag-bfh-ES>< / i> [phone]< / nobr>< / td> 
  

（您可以但不必使用& nbsp;


另一种方法是 nowrap 属性（已弃用/已过时，但仍能正常工作，除了一些稀有怪癖外）：



 < td nowrap>< i class =flag -bfh-ES>< / I> [phone]< / td> 
  

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

 < style> 
 .nobr {white-space：nowrap} 
< / style> 
 ... 
< td class = nobr>< i class =flag-bfh-ES>< / i> [phone]< / td> 
  




I have this <td> element:

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

I was hoping to keep this into a single line, but this is what I get:

As you can see, flag and telephone number are in separate lines. The   are working in between the numbers of the telephone number, but not between flag and telephone number.

How can I make sure that no line-break at all is introduced by the renderer?

解决方案

There are several ways to prevent line breaks in content. Using   is one way, and works fine between words, but using it between an empty element and some text does not have a well-defined effect. The same would apply to the more logical and more accessible approach where you use an image for an icon.

The most robust alternative is to use nobr markup, which is nonstandard but universally supported and works even when CSS is disabled:

<td><nobr><i class="flag-bfh-ES"></i> [phone]</nobr></td>

(You can, but need not, use   instead of spaces in this case.)

Another way is the nowrap attribute (deprecated/obsolete, but still working fine, except for some rare quirks):

<td nowrap><i class="flag-bfh-ES"></i> [phone]</td>

Then there’s the CSS way, which works in CSS enabled browsers and needs a bit more code:

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> [phone]</td>

这篇关于避免在html元素之间换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！