Многоточие подсвечивается, когда текст поиска находится под ним

Question

Ниже приведен код, который создается, когда пользователь пытается выполнить поиск (например, «h»). Найденный текст выделяется желтым цветом (см. Фрагмент).

Однако многоточие также подсвечивается, так как под ним находится буква «h».

Как не выделить многоточие и только выделить текст, который виден? Я пробовал так много вещей, но не смог этого достичь.

Спасибо.

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 wit<span class="styled-text-highlight">h</span> very very big name
 </div>

Answer 1

Добавить display:inline-block в styled-text-highlight

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

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

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

<div>

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