是否有一个CSS选择器选择一个矩形框中的文本（内联块）？(Is there a CSS select

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

例如，一个HTML片段等<p>The quick brown fox jumped over the lazy dog</p>可能被布置这样的：

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

如果我创建像一个CSS规则p { background: red }那么整个盒/矩形将有一个红色的背景，包括“空白”在每行的末尾。

有没有指定一个选择器，使得每行，只有实际的文字为红色背景的方法吗？

我注意到，在默认情况下从“箭头”光标变为“工字钢”时，它实际上是在文本; 当它的段落框内的其他地方，而不是在文本，然后它是一个箭头不是工字钢。

如果我指定像一个明确的规则p { cursor: crosshair }那么它的矩形框内到处有效。 再次，是有可能有只选中后的规则，当光标实际上是对文本？

Answer 1:

你可以做的是包裹在一个span元素的文本，然后设置背景和光标属性吧。

Answer 2:

有没有办法做的正是你想要的，据我所知，因为CSS选择器不匹配文本节点。 你必须包装在跨度文本，然后风格跨度。

Answer 3:

仅仅指刚一个简单的代码片段，以帮助可能：

增加了一个或两个extra..not必要的风格，但..希望它有助于..

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

文章来源: Is there a CSS selector to select text (inline blocks) within a rectangular box?