<span>段落中的重叠字符串

Question

假设我的文字如下:

<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.

我的想法是将divs放置在文本下方,使得它们与上面的匹配文本p对齐,但我更倾向于使用CSS将这些div与匹配字符串的开始和结束位置对齐将是一场噩梦.

有关如何做到这一点的任何想法？

Answer 1

您可能可以将每个单词放入其自己的单独的 span 元素中，然后使用类来适当地设置它们的样式。某些跨度将具有下划线重叠的多个类。有点冗长和丑陋的标记，但我认为它可以解决你的问题。