html - 省略号在搜索文本位于其下方时突出显示

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>