CODEWITHSUNDEEP
javascripthtmlcss
rxmnnxfpvg
rxmnnxfpvg

Reputation: 30993

<span> overlapping strings in a paragraph

Let's say I have text like:

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

I want to match two strings: many people, and people in Asia. I want the output to look like both strings were found independently, perhaps applying a different colored underline to each matched string, like so:

Lots of asians

But, in HTML I can't overlap spans because if I tried this:

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>

the first </span>would close span.second.

My thought is to position divs underneath the text such that they line up with the matched text in the p above, but I bet aligning those divs with the start and end positions of the matched strings using CSS would be a nightmare.

Any thoughts on how to do this?

Upvotes: 6

Views: 1427

Answers (4)

starbeamrainbowlabs
starbeamrainbowlabs

Reputation: 6106

You could do this:

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

Not as neat as the other two solutions, but it would style in a similar way to your original example.

Upvotes: 0

Umair Noor
Umair Noor

Reputation: 442

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; }

Upvotes: -1

RobG
RobG

Reputation: 147363

You could markup the overlap component seprately, e.g.:

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

Upvotes: 2

jjathman
jjathman

Reputation: 12604

You could probably put every word in its own individual span element and then use classes to style them appropriately. Some of the spans would have multiple classes where the underlines overlap. Kind of verbose and ugly markup but I think it would solve your problem.

Upvotes: 3

Related Questions