<span>段落

重叠串比方说，我有这样的文字：<span>段落

<p>There are many people in Asia.</p>

我想匹配两个字符串：many people，和people in Asia。我想输出看起来像两个字符串是独立发现，或许将不同颜色的下划线到每个匹配的字符串，像这样：

Lots of asians

但是，在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匹配的文本文字的下面，但我敢打赌，对准这些div使用CSS将是一场噩梦匹配字符串的开始和结束位置。

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

来源

2012-07-09 ash

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

来源

2012-07-09 05:53:05 jjathman

+1如果需要的话，OP可以修改样式规则以突出显示单个匹配。 – RobG 2012-07-09 05:58:11

是的，这很丑陋，但是对于这样的大量造型来说，它看起来就像是要走的路。谢谢。 – ash 2012-07-09 06:48:56

你可以seprately标记的重叠部分，例如：

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

来源

2012-07-09 05:54:35 RobG

-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-09 06:34:15

你可以这样做：

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

不像其他两种解决方案一样整齐，但它的风格与您的原始示例类似。

来源

2012-07-09 06:44:03 starbeamrainbowlabs

回答

相关问题