Geek asks and answers

<span> overlapping lines in paragraph

Let's say I have text like:

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

I want to combine two lines: many peopleand people in Asia. I want the result to look like both lines were found independently, possibly applying a different colored underline for each line, similar to the following:

Lots of asians

But in HTML, I cannot overlap the gaps, 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>will close span.second.

My thought is to fit divunder the text so that they match the matching text in the pabove, but I'm sure aligning these divs with the start and end positions of matching lines using CSS would be a nightmare.

Any thoughts on how to do this?

+5
source share
4

, span, . , . , , .

+3

, :

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

You can do it:

<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 will be similar to your original example.

0
source

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

More articles:


All Articles