停止包含换行跨度的词？

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

去除白色space

HTML 会将白色 space，包括换行符和制表符，压缩成 "words" 和内联元素之间的单个 space（有些例外情况适用）。

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 标签并删除 hard-coded non-breaking space 字符以获得更清晰的标记。

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>

Answer 2

要么删除单词中的所有空格，要么使用 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 分开，但这看起来像 one-off 代码，您不太可能在文档的其他地方重复使用，因此将其内联样式属性在这里可能是合适的。

停止包含换行跨度的词？

Stop word containing spans from wrapping?

html

css

word-wrap

去除白色space