在CSS中控制省略号样式

问题描述

我在与浏览器的查找功能类似的网络应用程序中实施搜索。
我想在页面上突出显示搜索到的字符串。搜索字符串通常是使用省略号显示的较长字符串的子字符串。

我想突出显示搜索字符串，并且在搜索字符串中找到部分文本替换为省略号，然后我想突出显示省略号本身。

我该怎么做？

• 溢出：隐藏容器元素


• 一个溢出：auto 内容元素
  
• 一个位置：绝对高亮元素



• 获取/设置状态的类属性

  
  
  

  以下是一些包含上述要求的演示：

blogspot.com/2010/09/regular-expression-search-bookmarklet.htmlrel =nofollow>区分大小写的搜索书签
• 
  

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?

解决方案

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

这篇关于在CSS中控制省略号样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！