html - 阻止包含 span 的单词换行？

Question

我在使用包含 span 的换行词时遇到一些问题。

下面的代码看起来相当复杂，但它所做的只是向“imagination”一词中的所有 i 添加彩色点。

<h2>The&nbsp;Clore&nbsp;Prize&nbsp; <span style="text-decoration: underline; color: rgb(255, 211, 0);">i</span>mag<span style="text-decoration: underline; color: rgb(0, 179, 223);">i</span>nat<span style="text-decoration: underline; color: rgb(238, 65, 34);">i</span>on&nbsp;lab</h2>

我遇到的唯一问题是单词在跨度处换行。我怎样才能阻止它这样做呢？我不想改变添加彩色点的方式。

这就是发生的事情:

如果我在 h2 上不加换行，那么它会执行以下操作(单词会从屏幕上消失):

已开启 this page 。

Answer 1

删除单词中的所有空格，或使用 white-space: nowrap:

<h2>These words will wrap. <span style="white-space:nowrap"><span style="text-decoration: underline; color: rgb(255, 211, 0);">i</span>longwordlongwordlongwordlongwordlongwordlongwordlongwordlongword<span style="text-decoration: underline; color: rgb(0, 179, 223);">i</span>nat<span style="text-decoration: underline; color: rgb(238, 65, 34);">i</span>on</span> Wrap</h2>

一般来说，最好将 CSS 与 HTML 分开，但这看起来像是一次性代码，您不太可能在文档的其他地方重用，因此在这里使用样式属性内联它可能是合适的。