Question

Can a CSS rule select the portion of a box which contains text (or an inline block)?

For example, an HTML fragment like <p>The quick brown fox jumped over the lazy dog</p> might be laid out like this:

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

If I create a CSS rule like p { background: red } then the whole box/rectangle will have a red background, including the “whitespace” at the end of each line.

Is there a way to specify a selector such that, on each line, only the actual text has a red background?

I notice that by default the cursor changes from ‘arrow’ to ‘i-beam’ when it’s actually over text; when it’s elsewhere within the paragraph box, not over text, then it’s an arrow not an i-beam.

If I specify an explicit rule like p { cursor: crosshair } then it’s effective everywhere within the rectangular box. Again, is it possible to have a rule that’s selected only when the cursor is actually over text?

Answer 1

What you can do is to wrap the text in a span element, and then set the background and cursor properties to it.