假设我有这样的文字:
<p>There are many people in Asia.</p>
我想匹配两个字符串:many people
, 和 people in Asia
.我希望输出看起来像是两个字符串都是独立找到的,也许对每个匹配的字符串应用不同颜色的下划线,如下所示:
但是,在 HTML 中我不能重叠跨度,因为如果我尝试这样做:
span.first { border-bottom: 1px solid red; }
span.second { border-bottom: 1px solid blue; }
<p>There are
<span class="first">many <span class="second">people</span> in Asia</span>.
</p>
第一个</span>
会关闭 span.second
.
我的想法是定位div
s 在文本下方,以便它们与 p
中的匹配文本对齐上面,但我打赌使用 CSS 将这些 div 与匹配字符串的开始和结束位置对齐将是一场噩梦。
关于如何做到这一点有什么想法吗?
最佳答案
您或许可以将每个单词放在其自己的单独 span 元素中,然后使用类来适本地设置它们的样式。一些跨度将有多个类,其中下划线重叠。有点冗长和丑陋的标记,但我认为它会解决你的问题。
关于javascript - <span> 段落中的重叠字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11389627/