阻止包含跨度的单词？

Question

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

下面的代码看起来相当复杂，但它所做的只是在“想象力”这个词中为所有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：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

一般情况下，将CSS与HTML分开会更好，但这看起来像是一次性代码，您不太可能在文档的其他位置重复使用，因此使用样式属性进行内联可能是合适的

Answer 2

删除空格

HTML会将空格（包括换行符和制表符）压缩到“单词”和内联元素之间的单个空格中（某些例外情况适用）。

https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1

<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>

但更好的方法是将内联样式移动到样式表中。您甚至可以依赖语义HTML u标记并删除硬编码的非破坏空格字符以获得更清晰的标记。

h2 {
  white-space: nowrap;
}
.yellow {
  color: rgb(255, 211, 0);
}
.blue {
  color: rgb(0, 179, 223);
}
.red {
  color: rgb(238, 65, 34);
}

<h2>The Clore Prize <u class="yellow">i</u>mag<u class="blue">i</u>nat<u class="red">i</u>on lab</h2>