多语言场景下截断文本高亮背景异常的解决方案求助

大家好，我最近碰到一个挺棘手的问题，想请教下各位有没有可行的解决思路：

我现在做文本展示时，需要同时实现文本截断（超出部分用省略号代替）和关键词高亮的功能，但遇到了一个异常情况：当文本被截断后，原本属于被截断部分的高亮背景居然还会显示出来！

我大概能定位到问题原因：目前的高亮逻辑是直接对完整的原始文本进行处理的，而不是先截断再高亮。可我又不能先按固定最大长度去截断文本——因为输入的文本支持多语言，不同语言的字符宽度差异很大，固定长度截断的话体验会非常差。

附上我当前的代码片段：

<div class="message-second-line">
  <span class="message-text" [innerHTML]="(getMessageSender(message) + (getMessageContent(message))) | highlight: trimmedSearchText">
  </span>
</div>

我也尝试过给外层的.message-second-line设置截断样式（比如text-overflow: ellipsis那一套），结果更糟——连省略号都不显示了，完全达不到预期。

我最终想要的效果是：如果高亮的关键词已经被截断到省略号后面、用户看不到了，那对应的高亮背景就不要出现；只有在截断后仍可见的部分里，关键词才保留高亮。举个例子，最终展示效果类似 Alice: Hello, how are you. I ... 这样，看不到的高亮部分不会有任何残留。

有没有大佬能给我指条明路呀？

内容来源于stack exchange