6

假设我有如下文字：

<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 与匹配字符串的开始和结束位置对齐将是一场噩梦。

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

4

4 回答 4

3

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

于 2012-07-09T05:53:05.160 回答
2

您可以单独标记重叠组件，例如：

<p>There are
  <span class="first">many </span>
  <span class="overlap">people</span>
  <span class="second"> in Asia</span>. 
</p>
于 2012-07-09T05:54:35.633 回答
0

你可以这样做：

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

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

于 2012-07-09T06:44:03.630 回答
-1

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; }
于 2012-07-09T06:34:15.020 回答