首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >避免html元素之间的行中断?

避免html元素之间的行中断?
EN

Stack Overflow用户
提问于 2018-04-11 06:34:30
回答 2查看 0关注 0票数 0

我有这个<td>要素:

代码语言:txt
复制
<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

我本想把它写成一行,但我得到的是:

正如你所看到的,旗号和电话号码是分开的。&nbsp;是在电话号码之间工作,而不是在标志和电话号码之间工作。

怎样才能确保渲染器没有引入任何中断行?

EN

回答 2

Stack Overflow用户

发布于 2018-04-11 15:31:41

有几种方法可以防止内容中断。使用&nbsp;这是一种方法,并且在单词之间工作很好,但是在一个空元素和一些文本之间使用它并不会产生明确的效果。同样的情况也适用于更符合逻辑和更容易访问的方法,在这种方法中,可以使用图像作为图标。

最有力的选择是使用nobr标记,它是非标准的,但普遍支持,即使在禁用CSS时也能工作:

代码语言:txt
复制
<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(你可以,但不需要,用&nbsp;而不是在这种情况下的空格。)

另一种方式是nowrap属性(废弃/过时,但仍然工作良好,

代码语言:txt
复制
<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

还有一种CSS方式,它可以在支持CSS的浏览器中工作,并且需要更多代码:

代码语言:txt
复制
<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>
票数 0
EN

Stack Overflow用户

发布于 2018-04-11 16:25:56

TD的CSS:white-space: nowrap;应该能解决。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100004388

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档