是否有 CSS 选择器可以在矩形框中选择文本（内联块）？

Question

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

例如，像<p>The quick brown fox jumped over the lazy dog</p> 这样的 HTML 片段可能会这样布局：

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

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

有没有办法指定一个选择器，使得每一行只有实际文本有红色背景？

我注意到默认情况下，光标实际上在文本上方时会从“箭头”变为“i-beam”；当它在段落框内的其他位置时，而不是在文本上方，那么它是一个箭头而不是一个 i-beam。

如果我指定像p { cursor: crosshair } 这样的显式规则，那么它在矩形框内的任何地方都有效。同样，是否有可能只有当光标实际位于文本上方时才选择规则？

Answer 1

您可以做的是将文本包装在 span 元素中，然后为其设置 background 和 cursor 属性。

Answer 2

据我所知，没有办法完全按照您的意愿行事，因为 CSS 选择器与文本节点不匹​​配。您必须将文本包装在一个跨度中，然后设置该跨度的样式。

Answer 3

只需一个简单的代码 sn-p 即可提供帮助：

添加了一两个额外的样式..虽然没有必要..希望它有所帮助..

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