¿Hay un selector de CSS para seleccionar texto (bloques en línea) dentro de un cuadro rectangular?

Question

¿Puede una regla CSS seleccionar la parte de un cuadro que contiene texto (o un bloque en línea)?

Por ejemplo, un fragmento de HTML como <p>The quick brown fox jumped over the lazy dog</p> pueden ordenarse a lo así:

+--------------------------+ 
| The quick brown fox  | 
| jumped over the   | 
| lazy dog    | 
+--------------------------| 

Si creo una regla CSS como p { background: red } entonces todo el cuadro/rectángulo tendrá un fondo rojo, incluyendo el "espacio en blanco "al final de cada línea.

¿Hay alguna forma de especificar un selector de modo que, en cada línea, solo el texto real tenga un fondo rojo?

Observo que, por defecto, el cursor cambia de 'flecha' a 'i-beam' cuando en realidad está sobre el texto; cuando está en otro lugar dentro del cuadro de párrafo, no sobre el texto, entonces es una flecha, no una i-beam.

Si especifico una regla explícita como p { cursor: crosshair }, entonces es efectiva en todas partes dentro del cuadro rectangular. De nuevo, ¿es posible tener una regla que se selecciona solo cuando el cursor está realmente sobre el texto?

Answer 1

Lo que puede hacer es envolver el texto en un elementopalmo, y luego configurar el fondo y cursor propiedades a la misma.

Answer 2

No hay forma de hacer exactamente lo que quiere, hasta donde yo sé, porque los selectores de CSS no coinciden con los nodos de texto. Tendría que envolver el texto en un lapso y luego diseñar el lapso.

Answer 3

jsut un simple fragmento de código para ayudar tal vez:

añade un estilo o dos extra..not necesaria aunque .. espero que ayude ..

p { 
    background-color: gray; 
    width: 700px; 
    height: 500px; 
    margin:auto; 
} 

span { 
    background-color: red; 
    width: 500px; 
    height: 200px; 
    border: 2px blue; 
    border-style: dotted dashed; 
    font-size: 2em; 
    display: block; 
    margin:auto; 
}