在CSS中控制省略号样式

Question

I implement Search in a web application that looks similar to the browser's "Find" feature. I want to highlight the searched strings on the page. The search-string is often a substring of longer string that is shown with ellipsis.

I want to highlight the search-string wherever it appears, and if it is found in the part of text replaced by ellipsis, then I want to highlight the ellipsis itself.

How can I do that?

Answer 1

Use the following components to implement it:

• An overflow:hidden container element
• An overflow:auto content element
• A position:absolute highlight element

• A class attribute to get/set the state

  Here are a few demos that comprise the aforementioned requirements:

• Case Sensitive Search Bookmarklet

• CSS Overflow Highlight