避免html元素之间的换行

109

我有这个<td>要素：

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

我希望将其放在一行中，但这就是我得到的：

在此处输入图片说明

如您所见，标志和电话号码位于单独的行中。该 是在电话号码的数字之间的工作，但并不标志和电话号码之间。

如何确保渲染器完全没有换行符？

html whitespace

— 蓝快
source

144

有几种方法可以防止内容换行。使用 是一种方法，并且可以在单词之间很好地工作，但是在空元素和某些文本之间使用它不会产生明确的效果。对于将图像用作图标的更合逻辑且更易于访问的方法，同样适用。

最健壮的选择是使用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>

— Jukka K.Korpela
source

16

回复：nobr，mozilla警告：“此功能是非标准的，不在标准轨道上。请不要在面向Web的生产站点上使用它：并非适用于所有用户。实现与操作系统之间可能存在很大的不兼容性。将来可能会改变行为。” - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— 卢克

1

@Luke，这是“标准”警告。他们没有描述任何不兼容（甚至很小），也没有提到任何不支持的浏览器nobr；没有了。

— Jukka K. Korpela

23

该nobr标签与使用该标签的类别相同blink：w3.org/TR/html5/obsolete.html#obsolete要么遵循 Web标准，要么致力于混乱的Web。这是你的选择。

— 路加福音

8

如果使用引导程序，则已经定义了一个“ text-nowrap”类，该类将相应地设置stype。

— Ratatwisker 2015年

4

@ JukkaK.Korpela，HTML5现在已经完成，很不奇怪，nobr它仍然被弃用，并且“一定不能使用”。

— Marcus 2015年

57

该td的CSS：white-space: nowrap;应解决该问题。

— tcak
source

7

如果您需要几个单词或元素来使用此功能，但不能将其应用于整个TD或类似的产品，则可以使用Span标签。

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

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

— 格雷格·利特尔
source

2

如果该<i>标签未显示为障碍物并引起了探查，则该方法应起作用：

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

— 阿默格尔
source

2

在某些情况下（例如，由JavaScript生成并插入的html），您可能还想尝试插入零宽度的连接器：

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

展开摘要

— 雨果·德·亨里格
source

2

这是真正的解决方案：

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

CSS：

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

例如，总是在文本之前的图像：

— 安德烈·伊兹曼（Andrey Izman）
source

-1

nobr太不可靠，请使用表格

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

一切都在同一条线上，彼此之间都是平等的，如果以后要更改某些内容，您将拥有更大的自由度。

— 埃里克·奥斯特林
source