135

我有这个<td>元素：

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

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

在此处输入图像描述

如您所见，标志和电话号码位于不同的行中。&nbsp;它们在电话号码的数字之间工作，但不在标志和电话号码之间。

如何确保渲染器根本没有引入换行符？

4

7 回答 7

180

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

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

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

（在这种情况下，您可以但不必使用&nbsp;空格来代替。）

另一种方法是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>
于 2013-10-06T18:28:18.400 回答
71

该 td: 的 CSSwhite-space: nowrap;应该可以解决它。

于 2013-10-06T18:18:47.090 回答
11

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

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

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

于 2014-05-29T18:42:52.097 回答
3

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

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

于 2013-10-06T18:19:48.950 回答
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>

于 2017-11-28T21:32:21.090 回答
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 */
}

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

在此处输入图像描述

于 2018-06-25T19:05:28.527 回答
-1

nobr 太不可靠，使用表

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

这一切都在同一条线上，一切都彼此水平，如果你以后想改变一些东西，你有更多的自由。

于 2019-03-08T18:15:25.380 回答