这是一场艰苦的战斗,但我想出了一种方法,可以在容器上不需要任何样式要求(包括字体、对齐等)的情况下完成操作。
虽然不是完美的解决方案,但希望它能满足您的需求。
var
//Keeps the content (individual spans) as they are built.
$keeper = $("<div>"),
//Used to measure span width for comparison to container.
$measurer = $("<div>"),
//The container of the text content
$p = $("p"),
//An individual line of the content
$line = $("<span>").appendTo($measurer),
//make this "invisible," but allow for measurement against container width
//with no restriction on measurer's own width (fixed)
$measurer.css({'position': 'fixed', 'top': '100%'}).appendTo("body");
//Iterate through each "word" derived from splitting on any space.
$p.text().split(/\s/).forEach(function (elem) {
//Start forming line text. Don't forget word spacing
$line.text($line.text() + elem + ' ');
//Enough words to make the line width longer than the p width.
//This indicates the end of "line."
if ($line.width() > $p.width()) {
//Remove the last word.
$line.text(function (_, text) {
return text.slice(0, text.lastIndexOf(elem));
});
//Keep the currently formed line to add back later
$line.appendTo($keeper);
//Create a new line for measuring
$line = $("<span>");
$line.text(' ' + elem).appendTo($measurer);
}
});
//Append any leftover words not big enough to form a whole line
$keeper.append($measurer.html());
//Add back content
$p.html($keeper.html());
//cleanup
$keeper.remove();
$measurer.remove();
如果容器的宽度依赖于窗口大小,您还可以在窗口调整大小时执行此操作。
(您可以在http://jsfiddle.net/6Cx3h中看到我使用高度而不是宽度的尝试)
<span>
,然后用css
(比javascript或jQuery更好)来实现。span:hover{
background-color: #ccc;
}
// extract the text
var paragraph = $("#text").text();
// split the text into lines by searching for linebreaks
var lines = paragraph.split(/\r?\n/);
// clear the original text
$("#text").text('');
$.each(lines,function(index,elem){
if (elem != ''){
// for each line, wrap it with a span and bring back the linebreak
$("#text").append('<span>'+elem+'</span><br/>');
}
});
span:hover { background:#DDD }
<br/>
,为什么不添加一个<span>
呢?我觉得这不是Acidic正在寻找的。 - otinanai您可以通过创建一个块,将其放置在每行文本的后面,来模拟非格式化段落中单行文本的突出显示。该块的大小与您的 p
line-height
相同,并根据鼠标 y-位置更改 top
位置。这种方法不能被视为本地突出显示,但它比其他建议具有一些优点。首先,它可以适应任何文本。其次,即使在调整流体文本块的大小后,它也可以计算出行数。第三,您可以保持文本干净,没有任何额外的标记(<br/>
)或其他 breaks
。
HTML 代码:
<p>Some long non-formatted - fluid text</p>
CSS:
p {
position:relative;
text-align:justify;
font: 14px/18px Arial; /*Line-height is essential to be defined because not all browsers translate the default value in px - e.g. Chrome returns "normal" and FF returns pixels*/
}
p span { /*The highlighter*/
background:yellow; /*Highlight color*/
display:none; /*Hide it until we have a hover*/
position:absolute;
left:0;
z-index:-1; /*Place it behind the text*/
}
jQuery:
//get the line-height
var theLineheight = $('p').css('line-height');
//strip it from the 'px'
var Lineheight = parseInt(theLineheight);
//get the text height
var thePheight = $('p').height();
//update the height after resize
window.onresize = function () {
return thePheight = $('p').height();
}
//create the highlight box
$('p').append('<span style="height:' + theLineheight + ';width:100%"></span>');
//detect mouse movement in the text container
$('p').mousemove(function (e) {
//show the highlighter
$('p span').show();
//get the mouse position
mouseTop = e.pageY - this.offsetTop;
//round it to a line-height scale
topPos = Math.ceil(mouseTop / Lineheight) * Lineheight - Lineheight;
//position the highlighter vertical
$('p span').css('top', topPos + 'px');
//hide the highlighter when mouse is at the end of the text - including the space that highlighter takes
if (topPos > (thePheight - Lineheight)) {
$('p span').hide();
}
//hide the highlighter when mouse is not over the text
}).mouseout(function (e) {
$('p span').hide();
});