停止在 ReactJS 中的下一个 span/div 中选择文本

Question

问题

我遇到了一个奇怪的问题，我想解决。我有两个跨度，它们在我的代码中彼此相邻。当您选择第一个范围中的最后一个单词时，它将选择旁边的范围中的第一个单词。

下面是一个 JSFiddle 来演示： https://jsfiddle.net/b7mybsLr/1/

我试过什么

在我在网上找到的解决方案中，最接近我的是应用CSS规则：

user-select: all;

这停止了问题，而是创建了一个新问题，因为当您单击文本时，它会突出显示跨度中的所有文本，这不是我真正想要的。

我也尝试添加：

display: inline-block;

正如演示中所见，这也无济于事。

我还在每行的末尾添加了" "，这实际上确实解决了问题。但是，理想情况下，我们希望在代码库中避免使用代码。

最后，我尝试将跨度换成div，但正如在 jsfiddle 中看到的那样，问题仍然存在。我不确定这是否是渲染 DOM 方式的 React 问题，或者它是否是 CSS 问题 - 谢谢。

Answer 1

这是因为浏览器将文本视为One和Test为单个文本。您可以通过从 css 中删除边距来查看这一点。您将看到文本OneTest

要解决此问题，只需在TestComp文本的末尾添加一个空格，如

<TestComp type={'span'} text={"Test Span One "} />

或者将您的添加到标签的末尾，如

<TestComp type={'span'} text={"Test Span One"} />&nbsp;

有很多方法可以克服它。