避免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>

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。

Answer 4

如果<i>标记没有显示为块并导致问题，那么这应该工作：

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

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> 

Answer 6

这是真正的解决方案：

<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 */
}

示例，始终在文本之前的图像：

Answer 7

nobr太不可靠，使用表格

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

一切都在同一条线上，一切都与彼此保持平衡，如果你想稍后改变一些东西，你就有更多的自由。