停止在ReactJS

Question

问题

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

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

我尝试了什么

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

    user-select: all;

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

我还尝试添加：

    display: inline-block;

这也没有帮助，如演示中所示。

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

最后，我尝试更换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;

有很多方法可以克服它。