<span>段落中的重叠字符串</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。

我的想法是将div置于文本下方，以便它们与上面p中的匹配文字对齐，但我敢打赌将这些div与匹配的开头和结尾位置对齐使用CSS的字符串将是一场噩梦。

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

Answer 1

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

Answer 2

您可以分别标记重叠组件，例如：

<p>There are
  <span class="first">many </span>
  <span class="overlap">people</span>
  <span class="second"> in Asia</span>. 
</p>

Answer 3

你可以这样做：

<p>There are
  <span class="first">many <span class="second">people</span></span>
  <span class="second">in Asia</span>. 
</p>

不像其他两个解决方案那样整洁，但它的样式与原始示例类似。

Answer 4

HTML：

 <p>There are
        <span class="first">many </span>
        <span class="second">people</span> 
        in Asia.
    </p>

CSS：

span.first { border-bottom: 1px solid red; }
span.second { border-bottom: 1px solid blue; }