避免HTML元素之间的换行

Question

我有这个<td>元素:

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

我本来希望这个内容只占用一行，但是却变成了下面这样：

你可以看到，旗帜和电话号码在两行中。虽然   在电话号码的数字之间起作用，但却对旗帜和电话号码之间没有起作用。

我怎样才能确保渲染器不会引入任何换行符呢？

- blueFast

---

投票重新开放，因为这是关于元素而不是文本的，链接为 https://dev59.com/n3RB5IYBdhLWcg3wn4UL - Ciro Santilli OurBigBook.com

Answer 1

有几种方法可以防止内容中的换行。使用   是其中一种方法，在单词之间很有效，但在空元素和文本之间使用它没有明确定义的效果。对于使用图像作为图标的更逻辑和更易访问的方法也同样适用。

最强大的替代方法是使用 nobr 标记，虽然非标准化，但被普遍支持并可在禁用 CSS 时使用：

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

在这种情况下，您可以使用 而不是空格，但并非必须。

另一种方法是使用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>

- Jukka K. Korpela

---

回复：nobr，Mozilla警告“该特性不是标准并且没有进入标准轨道。请勿在面向Web的生产站点上使用它：它不适用于每个用户。实现之间可能存在较大的不兼容性，并且行为可能会在未来发生变化。”-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr - Luke

@Luke，那是一个“标准”的警告。它们没有描述任何不兼容性（即使是小的），也没有提到任何不支持nobr的浏览器；这样的浏览器是不存在的。 - Jukka K. Korpela

“nobr”标签与使用“blink”标签属于同一类别：http://www.w3.org/TR/html5/obsolete.html#obsolete。你可以朝着Web标准的方向努力，也可以朝着混乱的Web方向前进。选择权在你手中。 - Luke

如果你正在使用Bootstrap，已经定义了一个名为"text-nowrap"的类，可以根据该类设置样式以实现不换行文本。 - Ratatwisker

@JukkaK.Korpela，HTML5现在已经最终确定，而且毫不意外的是，nobr仍然被弃用并且“不得使用”。 - Marcus

Answer 2

CSS针对td的样式：white-space: nowrap;可以解决这个问题。

- tcak

Answer 3

如果你需要将此应用于多个单词或元素，但无法将其应用于整个TD或类似元素，则可以使用Span标签。

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

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

- Greg Little

---

我喜欢 white-space 属性，之前不知道它的存在。 - jksevend

Answer 4

如果标签没有作为块级元素显示并且导致了问题，那么这个解决方法应该有效：  [phone]

- ameagher

Answer 5

在某些情况下（例如由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>

- hugo der hungrige

Answer 6

这是真正的解决方案：

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>[phone]</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

Answer 7

nobr太不可靠了，使用表格吧

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

所有内容都在同一行上，彼此之间平齐，如果以后想要更改某些内容，您将拥有更多的自由。

- Erik Österling