阻止分裂的话

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>

Answer 2

将想象力这个词包含在应用了.span的其他display: inline-block中可能会解决它。请参阅下面的示例

    var button = document.body.querySelector('.changeWidth');
    var textWrap = document.body.querySelector('.text-wrap');

    button.addEventListener('click', changeWidth);

    function changeWidth() {
      textWrap.style.width = (Math.random() * (600 - 200) + 200) + 'px';
    }

 body {
   font: 2em bold Arial, sans-serif;
 }
 div.text-wrap {
   width: 250px;
   border: 1px solid #000;
 }
 span.word-wrap {
   display: inline-block;
 }

<div class="text-wrap">

  <span class="word-wrap">The Clore Prize</span>  <span class="word-wrap"><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</span>
  <span
  class="word-wrap">lab</span>

</div>

<button class="changeWidth">Change width of container</button>