<span> cuerdas superpuestas en un párrafo

Question

Digamos que tengo texto como:

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

Quiero coincidir con dos cadenas: many people y people in Asia. Quiero la salida para que parezca ambas cadenas se encontraron de forma independiente, tal vez aplicar un subrayado de color diferente a cada cadena coincidente, así:

Pero, en HTML que no se pueden superponer vanos, porque si lo intentara esto:

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> 

la primera </span> cerraría span.second.

Mi idea es posicionar div s debajo del texto de tal manera que se alinean con el texto coincidente en el p anterior, pero apuesto a la alineación de los divs con las posiciones inicial y final de las cadenas coincidentes usando CSS sería una pesadilla .

¿Alguna idea sobre cómo hacer esto?

Answer 1

Probablemente pueda poner cada palabra en su propio elemento de tramo individual y luego usar las clases para darle un estilo apropiado. Algunos de los tramos tendrían múltiples clases donde los subrayados se superponen. Tipo de marcado detallado y feo, pero creo que eso resolvería tu problema.

Answer 2

Usted podría markup el componente de solapamiento seprately, por ejemplo .:

<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

usted puede hacer esto:

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

No es tan limpio como las otras dos soluciones, pero se estilizaría de forma similar a su ejemplo original.