C'è un selettore CSS per selezionare il testo (blocchi in linea) all'interno di una casella rettangolare?

Question

Una regola CSS può selezionare la porzione di una casella che contiene testo (o un blocco in linea)?

Per esempio, un frammento di HTML come <p>The quick brown fox jumped over the lazy dog</p> potrebbero essere disposti in questo modo:

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

Se creo una regola CSS come p { background: red } quindi l'intera scatola/rettangolo avrà uno sfondo rosso, tra cui il "spazio bianco "alla fine di ogni riga.

C'è un modo per specificare un selettore in modo che, su ogni riga, solo il testo reale abbia uno sfondo rosso?

Ho notato che di default il cursore cambia da "freccia" a "i-beam" quando è effettivamente sul testo; quando è altrove nella casella del paragrafo, non sul testo, quindi è una freccia non un i-raggio.

Se si specifica una regola esplicita come p { cursor: crosshair }, è valida ovunque all'interno della casella rettangolare. Di nuovo, è possibile avere una regola che viene selezionata solo quando il cursore è effettivamente sul testo?

Answer 1

Che cosa si può fare è quello di avvolgere il testo in un arco elemento, e quindi impostare il sfondo e cursore oggetti da esso.

Answer 2

Non c'è modo di fare esattamente quello che vuoi, per quanto ne sappia perché i selettori CSS non corrispondono ai nodi di testo. Dovresti avvolgere il testo in uno span e poi dare uno stile all'intervallo.

Answer 3

jsut un codice semplice frammento per aiutare forse:

aggiunto uno stile o due extra..not necessario però .. spero che aiuta ..

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