Highlight Ellipsis when search text is found in the hidden part of the overflown text

Question

I have below code which is created when a user tries to search (e.g. 'h name'). The searched text is highlighted in yellow (see the snippet).

div {
  width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.styled-text-highlight {
  font-weight: 800;
  color: black;
  background-color: #FFED4C;
}

<div>
  T<span class="styled-text-highlight">h</span>is is a test testtttttt very very big <span class="styled-text-highlight">name</span>
</div>

One of the search keywords found is name and it is hidden because of text-overflow.

In this case I want the ellipsis dots to be highlighted in Yellow as well to indicate some text from search was found in the hidden part.

Is there a way to achieve this?