Javascript 在contenteditable div边缘案例中高亮显示

我正在努力使contenteditable div文本高亮显示或不高亮显示。但我面临的是一种边缘情况，如果我将鼠标端到端地拖动到文本上，我的div也会被选中。这意味着，如果我打印范围，它会将父元素作为结束容器

<div class = "XYZ">
 <span class = "highlighted">ABCD</span>
</div> 

ABCD

当我记录range.endContainer时，它会打印XYZ

此外，我正在使用range.setStart（）和range.setEnd（）方法调整我的范围，这意味着我在以下情况下失败：

<div class = "XYZ">
 <span class = "unhighlighted">ABCD</span>
</div>


range.setEnd(range.endContainer, range.endContainer.textContent.length)

ABCD
range.setEnd（range.endContainer，range.endContainer.textContent.length）

---

我确信我在设置范围的结束部分时犯了错误，但我无法确定在哪里。。。有人能帮忙吗？

可能是因为span元素是

display:inline

尝试css:

display:block

不，我不希望span显示在block中。