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)

• you meant something like this? :

• you may update your styles to this:

.message-second-line {
  width: 200px;
}
    
.message-text {
  position: relative;
  max-width: 100%;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

it's the display: -webkit-box and line-clamp properties. but be aware that these are not standard and consider the browser support. you may check MDN docs on line-clamp, but couldn't find docs for -webkit-box.