Ellipsis is highlighted when search text is below it

user_6654503 0
Viewed 191

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

However, the ellipsis is also highlighted as there is a 'h' just below it.

How can I not highlight the ellipsis and only highlight the text which is visible? I tried so many things, but could not achieve this.

Thanks.

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>

css html
1 Answers

Add display:inline-block on 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>

user_40950560
Related