Html 阻止单词被拆分

我使用以下代码创建图像中的内容：

<h2>
    The Clore Prize <span style="text-decoration: underline; color: rgb(247, 147, 30);">i</span>mag<span style="text-decoration: underline; color: rgb(85, 81, 163);">i</span>nat<span style="text-decoration: underline; color: rgb(238, 65, 34);">i</span>on lab
</h2>

克洛尔奖想象实验室

我想回避的问题是“想象”这个词的文字包装。我该怎么做

单词中的不同跨度添加了彩色点，但这会导致单词分裂

客户希望不惜一切代价保留彩色圆点，因此不可将其取出

---

不要认为这是另一个问题的重复，因为答案需要滚动条。。。我绝对不想要

您可以使用

断字：全部保留



克洛尔奖想象实验室
将单词imagination包装在另一个
中。span
使用
显示：应用于它的内联块
可能会解决这个问题。请参见下面的示例


var-button=document.body.querySelector（'.changeWidth'）；
var textWrap=document.body.querySelector（'.text wrap'）；
按钮。addEventListener（'click'，changeWidth）；
函数changeWidth（）{
textWrap.style.width=（Math.random（）*（600-200）+200）+“px”；
}
正文{
字体：2米粗体Arial，无衬线；
}
div.text-wrap{
宽度：250px；
边框：1px实心#000；
}
span.word-wrap{
显示：内联块；
}

克洛尔奖想象力
实验室
更改容器的宽度
这样，您就想像图像一样吗？什么浏览器可以这样做？此html中的文本不应换行。不使用Chrome换行，但我怀疑您的示例html缺少某些内容，因为该样式也不会导致您的“I”有2种颜色…在jsfiddle.net上复制该问题，看起来有一些样式没有在您共享的代码段中表达。在，org原始代码使单词沿直线移动。这个解决方案很好，尽管它将样式应用于块中的所有单词。此外，将其应用于标题标记可能更简单。从该代码段中删除分词也会导致它不换行。所以有别的东西在做。我通过从style div内部完全删除styles（但留下单词style=”“）来测试它，但它仍然没有中断。