代码之家 › 专栏 › 技术社区 › ChrisW

是否有CSS选择器来选择矩形框中的文本(内联块)?

css-selectors css

9

ChrisW · 技术社区 · 17 年前

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 } 然后整个框/矩形将有一个红色背景,包括每行末尾的“空白”。

有没有一种方法可以指定一个选择器,使每行只有实际文本有一个红色背景?

我注意到,默认情况下,当光标实际位于文本上方时,光标从“箭头”变为“i-beam”;当光标位于段落框中的其他位置,而不是位于文本上方时,则它是箭头而不是i-beam。

如果我指定一个明确的规则 p { cursor: crosshair } 然后它在矩形框内的任何地方都有效。同样,是否可以只在光标实际位于文本上时选择规则?

3 回复 | 直到 12 年前

1

9

remi 17 年前

您可以做的是将文本换行到跨度元素,然后设置背景和光标它的属性。

2

7

mishac 17 年前

据我所知,没有办法精确地执行您想要的操作,因为CSS选择器不匹配文本节点。你必须在一个跨距内包装文本,然后设置跨距样式。

3

-1

Neil 12 年前

jsut一个简单的代码片段可能有助于:

添加了一两个样式。但不需要。希望它有帮助。

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