有一个CSS选择器来选择矩形框中的文本（内联块）？ [英] Is there a CSS selector to select text (inline blocks) within a rectangular box?

问题描述

CSS规则是否可以选择包含文本（或内联块）的框的部分？

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

例如，像< p>快速棕色狐狸跳过懒惰狗< / p> 可能是这样布局的：

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                |
+--------------------------|

如果我创建一个CSS规则 p {background：red} code>然后整个框/矩形将有一个红色的背景，包括每一行的结尾处的空格。

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.

如果我指定一个像这样的显式规则， p {cursor：crosshair} 那么它在矩形框内的任何地方都有效。

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?

推荐答案

你可以做的是，只有当光标实际位于文本上方时，将文本包裹在 span 元素中，然后将背景和光标属性设置为

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

这篇关于有一个CSS选择器来选择矩形框中的文本（内联块）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！