在自动换行期间防止跨度之间的单词狭缝被拆分答案

【问题标题】：Prevent Word Slit Between Spans From Being Split During Word Wrap在自动换行期间防止跨度之间的单词狭缝被拆分
【发布时间】：2021-07-09 22:59:34
【问题描述】：

我有一种情况，我正在以一种方式设置段落的前半部分，并通过使用跨度以另一种方式设置后半部分的样式，但是更改（故意）发生在这样一个非常长的单词的中间：

<span id="first-half">Text that is normal length followed by a reallylongword</span><span id="second-half">thatjustkeepsgoing and then normal text continues.</span>

我遇到的问题是 Chrome 和 Edge（尽管不是 Firefox）将长单词视为两个单独的单词，并在应用文本换行时拆分单词。有什么办法可以防止这种情况发生，即使它被一个跨度分割，也可以将它视为一个单词？

【问题讨论】：

标签： html css word-wrap

【解决方案1】：

我已将容器的大小限制为 150 像素，因此即使空间不足，您也可以看到它不会断字。

.red {
  width: 150px;
  color: red;
}

.green {
  color: green;
}

<p class="red">
  Text that is normal length followed by a reallylongword<span class="green">thatjustkeepsgoing and then normal text continues.</span>
</p>

【讨论】：