<span> nakładające się ciągi w akapicie

Question

Powiedzmy mam tekst jak:

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

chcę, aby dopasować dwa ciągi: many people i people in Asia. Chcę wyjście wyglądać obu ciągów stwierdzono niezależnie, może stosując inną kolorową podkreślenie dopasowane do każdego napisu, tak:

Ale w HTML nie mogą się pokrywać przęseł bo gdybym próbował to:

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> 

pierwszy </span> by zamknąć span.second.

Moja myśl jest pozycja div s pod tekstem tak, że ustawiają się z dopasowanego tekstu w powyższym p, ale założę się, dopasowując te DIV z rozpoczęcia i zakończenia pozycji dopasowanej strun za pomocą CSS byłby koszmar .

Wszelkie uwagi na temat tego, jak to zrobić?

Answer 1

Można prawdopodobnie umieścić każde słowo we własnym indywidualnym elementem rozpiętości a następnie użyć klas projektować je w odpowiedni sposób. Niektóre przęsła miałyby wiele klas, w których podkreślenia zachodzą na siebie. Rodzaj gadatliwego i brzydkiego znacznika, ale myślę, że rozwiąże on twój problem.

Answer 2

Można oznaczyć komponent nakładania seprately, np .:

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

Answer 3

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

Answer 4

Można to zrobić:

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

Nie tak schludny jak dwa pozostałe rozwiązania, ale będzie stylizowany w podobny sposób do oryginalnego przykładu.