阻止分裂的话

Question

我正在使用以下代码来创建图像中的内容:

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

我想要解决的问题是"想象力"这个词的文字包装.我怎样才能做到这一点？

单词中的各种跨度是添加彩色点,但它会导致单词被分割.

客户希望不惜一切代价保留彩色圆点,因此不能选择跨越.

---

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

Answer 1

您可以使用

word-break: keep-all;

<div style="width:200px;margin:0 auto;word-break:keep-all;background:#ccc;padding:0px 5px;">
    <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>
</div>