避免 html 元素之间的断行

小开

CSS 的 td: white-space: nowrap;应该可以解决这个问题。

小开

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

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

小开

最佳答案

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

最健壮的替代方案是使用 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>

小开

如果几个单词或元素都需要这个标记，但不能将其应用于整个 TD 或类似的标记，则可以使用 Span 标记。

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

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

小开

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

小开

这才是真正的解决办法:

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

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

小开

Nobr 太不可靠，使用表格

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

一切都在同一条线上，一切都是水平的，如果你以后想要改变什么，你会有更多的自由。