Я реализую функцию выделения слова на основе ключевого слова в поиске.
Таким образом, на основе ключевого слова я заменяю содержимое тегом span и добавление класса в качестве «выделенного текста»
value = value.replace(RegularExpression, `<span class="highlight-text">${value.match(re)[0]}</span>`);
CSS для выделенного текста
.highlighted-text{
background:yellow;
}
, а также использование этого css для обрезки текста с 3 точками. Как вы можете видеть на картинке ниже.
.message{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Так что все работает нормально
Но позвольте мне найти слово, которое скрыто внутри обрезанного текста ie. "..." как "хоккей"
Так что он не отображается как скрытый. Я хочу показать пользователю правильно выделенный текст с предтекстом и после текста с некоторым ограничением. Есть ли какой-нибудь идеальный способ, которым мы можем достичь этого, в javascript или css?