Existe-t-il un sélecteur CSS pour sélectionner du texte (blocs en ligne) dans une boîte rectangulaire?

Question

Une règle CSS peut-elle sélectionner la partie d'une boîte qui contient du texte (ou un bloc en ligne)?

Par exemple, un fragment HTML comme <p>The quick brown fox jumped over the lazy dog</p> pourrait être aménagé comme ceci:

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

Si je crée une règle CSS comme p { background: red } puis l'ensemble boîte/rectangle aura un fond rouge, y compris les « espaces blancs "à la fin de chaque ligne.

Existe-t-il un moyen de spécifier un sélecteur tel que, sur chaque ligne, seul le texte actuel a un arrière-plan rouge? Je remarque que, par défaut, le curseur passe de 'flèche' à 'je-poutre' lorsqu'il est réellement sur du texte; quand il est ailleurs dans la zone de paragraphe, pas sur le texte, alors c'est une flèche pas une poutre en i.

Si je spécifie une règle explicite comme p { cursor: crosshair } alors il est efficace partout dans la zone rectangulaire. Encore une fois, est-il possible d'avoir une règle qui est sélectionnée seulement quand le curseur est réellement sur le texte?

Answer 1

Ce que vous pouvez faire est d'envelopper le texte dans un élément span, puis définissez l'arrière-plan et curseur propriétés à elle.

Answer 2

Il n'y a aucun moyen de faire exactement ce que vous voulez, autant que je sache, car les sélecteurs CSS ne correspondent pas aux nœuds de texte. Vous devez envelopper le texte dans un intervalle, puis le style de la durée.

Answer 3

jsut simple bout de code pour aider peut-être:

a ajouté un style ou deux extra..not nécessaire si .. .. elle pourra être utile

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