Javascript 如何突出显示隐藏在。。。由于文本溢出:省略号

Javascript 如何突出显示隐藏在。。。由于文本溢出:省略号,javascript,html,css,Javascript,Html,Css,我在搜索中基于关键字实现了突出显示单词的功能 因此,基于关键字,我用span标记替换内容,并将类添加为“突出显示的文本” 我也使用这个css来实现3点文本的剪辑。如下图所示 .message{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 所以它工作得很好 但让我来搜索隐藏在剪辑文本中的单词,例如“…”和“曲棍球”

我在搜索中基于关键字实现了突出显示单词的功能

因此,基于关键字,我用span标记替换内容,并将类添加为“突出显示的文本”

我也使用这个css来实现3点文本的剪辑。如下图所示

 .message{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
       }

所以它工作得很好

但让我来搜索隐藏在剪辑文本中的单词,例如“…”和“曲棍球”


因此,它不会以隐藏的形式出现。我想在一定程度上使用前文本和后文本向用户正确显示突出显示的文本。有什么理想的方法可以在javascript或css中实现这一点吗?

在什么范围之外?…您可以克隆范围并在任何需要的地方显示克隆。我猜您的意思是在浏览器中。我不认为有一个琐碎的方法。我不认为你从JS中知道文本是否真的被剪切,或者选择是否在被剪切的文本中。我建议暂时将样式更改为
溢出滚动
。或者,将字符串分为3个部分,并仅在外部2上设置溢出样式?您可以描述一下您的搜索方法吗。ctrl+f?以编程方式?可能尝试准备一个方法,该方法搜索关键字并仅显示出现在关键字前后的几个单词。显示准备好的文本,而不是描述的开头。所以它可以显示:“……我喜欢打曲棍球”
.highlighted-text{
  background:yellow;
 }
 .message{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
       }