<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

回答

相關問題