避免在 html 元素之间换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19212188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Avoid line break between html elements
提问by blueFast
I have this <td>element:
我有这个<td>元素：
<td><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>
I was hoping to keep this into a single line, but this is what I get:
我希望将其保留在一行中，但这就是我得到的：
As you can see, flag and telephone number are in separate lines. The are working in between the numbers of the telephone number, but not between flag and telephone number.
如您所见，标志和电话号码在不同的行中。该 是在电话号码的数字之间的工作，但并不标志和电话号码之间。
How can I make sure that no line-break at all is introduced by the renderer?
如何确保渲染器根本不引入换行符？
回答by Jukka K. Korpela
There are several ways to prevent line breaks in content. Using is one way, and works fine between words, but using it between an empty element and some text does not have a well-defined effect. The same would apply to the more logical and more accessible approach where you use an image for an icon.
有几种方法可以防止内容中的换行。使用 是一种方式，在单词之间效果很好，但在空元素和某些文本之间使用它不会产生明确的效果。这同样适用于使用图像作为图标的更合乎逻辑和更易于访问的方法。
The most robust alternative is to use nobrmarkup, which is nonstandard but universally supported and works even when CSS is disabled:
最强大的替代方法是使用nobr标记，这是非标准但普遍支持的，即使禁用 CSS 也能正常工作：
<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>
(You can, but need not, use instead of spaces in this case.)
（ 在这种情况下，您可以但不需要使用空格代替。）
Another way is the nowrapattribute (deprecated/obsolete, but still working fine, except for some rare quirks):
另一种方式是nowrap属性（已弃用/过时，但仍然可以正常工作，除了一些罕见的怪癖）：
<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>
Then there's the CSS way, which works in CSS enabled browsers and needs a bit more code:
然后是 CSS 方式，它适用于支持 CSS 的浏览器，需要更多代码：
<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>
回答by tcak
CSS for that td: white-space: nowrap;should solve it.
td 的 CSS:white-space: nowrap;应该解决它。
回答by Greg Little
If you need this for several words or elements, but can't apply it to a whole TD or similar, the Span tag can be used.
如果您需要为多个单词或元素使用它，但不能将其应用于整个 TD 或类似内容，则可以使用 Span 标签。
<span style="white-space: nowrap">Text to break together</span>
or
<span class=nobr>Text to break together</span>
If you use the class version, remember to set up the CSS as detailed in the accepted answer.
如果您使用课堂版本，请记住按照已接受的答案中的详细说明设置 CSS。
回答by hugo der hungrige
In some cases (e.g. html generated and inserted by JavaScript) you also may want to try to insert a zero width joiner:
在某些情况下（例如由 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>‍<span class="no-break-before">TOGETHER</span>
</div>回答by Andrey Izman
This is the real solution:
这是真正的解决方案：
<td>
<span class="inline-flag">
<i class="flag-bfh-ES"></i>
<span>+34 666 66 66 66</span>
</span>
</td>
css:
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 */
}
Example, images which always before text:
例如，总是在文本之前的图像：
回答by ameagher
If the <i>tag isn't displayed as a block and causing the probelm then this should work:
如果<i>标签未显示为块并导致问题，那么这应该有效：
<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>
<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>
回答by Erik ?sterling
nobr is too unreliable, use tables
nobr 太不靠谱了，用表格
<table>
<tr>
<td> something </td>
<td> something </td>
</tr>
</table>
It all goes on the same line, everything is level with eachother, and you have much more freedom if you want to change something later.
一切都在同一条线上，一切都是相互的，如果你以后想改变一些东西，你有更多的自由。
