How to solve truncated text is highlight with background color

This is the issue. The truncated text is replaced with ellipsis, but the highlight background is still applied.

This is due to that highlight is with the original text, not the truncated text. But I cannot use the way to truncate text with a specific max length first, The text input can be multi languages.

Is there a way to fix the issue?

Test code in stackblitz is here https://bolt.new/~/stackblitz-starters-rlbxchnf

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


If I applied the ellipsis way in message-second-line, then there is no ellipsis,

This is also not I wanted.

Is there any way to handle it to get the result like Alice: Hello, how are you. I ... ( no highlight when the highlight text is invisible)

Continue reading...