Question

我有一个＆lt; p>标签充满了文字。渲染到页面时，它显示为5行。我想要样式和定位＆lt; div>标记以突出显示给定的行而无需触及＆lt; p>标签或其内容，最好使用jQuery。

所以标记看起来像

<p>one fish two fish red fish zoo fish fifth fish</p>

渲染看起来像

一条鱼
两条鱼
红鱼
动物园鱼
第五条鱼

我想要在~~“red fish”~~第3行的顶部有一个透明的红色div。

我没有尝试任何事情，我完全没有想法。

回应Matt Burland的问题：我要创建一个函数，给定一个元素P和一个行号，在呈现的那条线上放置一个彩色的框。

p可以呈现为任意数量的行。

窗口大小是固定的，这是我不必担心的一件事。

其他功能取决于页面的DOM。我可以插入一个div标签，但不是很多。

Answer 1

DEMO

<强> JS

$p = $('p').first();
$pHeight = $p.height()/5;
$pTop = $p.offset().top+(2*$pHeight);
$p.after('<div id="IvetriednothingandImalloutofideas" style="height:'+$pHeight+'px;top:'+$pTop+'px">');

<强> CSS

p {
    outline:1px solid #ccc;
    width:60px; 
}

#IvetriednothingandImalloutofideas {
    background-color:rgba(255,0,0,0.2);
    width:60px;
    position:absolute;
}

Answer 2

这样做是一个非常糟糕的主意。正如其他人告诉列表元素是正确的方法。但是如果你需要保持P完好无损，你可以设置行高并进行数学运算以将div作为叠加层放置。

CSS：

line-height: 22px;

JS：

var pHeight = $('p').height();
var lineHeight = parseInt($('p').css('line-height'));
var selectedLine = 3;
$('#overlay').css('top', -Math.abs(selectedLine * lineHeight));

请参阅小提琴：http://jsfiddle.net/JVxdJ/

Answer 3

如果你不想依赖格式化（行位置可能会改变等）和你不想改变原来的<P>，你可以克隆它 - 突出显示必填文本并将克隆的文本叠加在原文上：

<强> HTML

<p id="text">one fish two fish red fish zoo fish fifth fish</p>

<强> CSS

#text {
    width:50px;
}

.highlight {
    background-color:red    
}

<强> JS

var $text = $('#text');
var match = "red fish";

var $newtext = $text.clone().html($text.html().replace(match, '<span class="highlight">' + match + '</span>'))

$newtext.appendTo('body').offset($text.offset())

演示： http://jsfiddle.net/j4UfM/1/

您可以根据需要删除突出显示的副本。

如何将div放在p的特定行上？

3 个答案: