类似于CSS“float:right”,但不可选择

更简单的解决方案

我能想到的最好的方法是提供文本的另一种视图,一个不显示您的便利贴框的打印机友好版本。只要帖子的内容在文本流中,你就会遇到这个问题。

作为一个更困难的选择,你可以走javascript路线。这将涉及在正文中插入一个空的DIV,并为其设置宽度和高度,然后将便利贴放置在同一位置并进行绝对定位。

<div id="container" style="position:relative;">
  <div class="text">Duis non lorem vel diam adipiscing dignissim. 
    Nulla vel varius erat. Nulla facilisi. Vivamus pulvinar pretium dignissim. 
    Aliquam sed tortor posuere nunc bibendum mattis. Integer bibendum, elit ut 
    vestibulum tristique, dolor justo scelerisque nibh, ac blandit metus arcu 
    non nibh.In ac eros sed nisl porta bibendum quis in mauris. Quisque 

    <div style="float:right; margin:10px; width:100px; height:100px;"></div>

    pellentesque ligula eu sapien commodo at mollis purus feugiat. Vivamus 
    volutpat dictum magna eu venenatis. Suspendisse dignissim enim aliquet leo 
    imperdiet vitae accumsan mauris blandit. Donec tempus velit aliquet magna 
    imperdiet euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum mollis tortor pellentesque velit pharetra non lobortis est 
    aliquam.
</div>
<div class="post-it">
  I am the post-it. I should be placed absolutely so that 
  I overlap the div that is presently sitting within the body of text. This 
  will give the impression that I too exist within there, but I won't be 
  selectable.
</div>
</div>

动态确定空div的宽度/高度,使其与帖子的宽度/长度相匹配,这可以很容易地用javascript完成。以下是一个使用jQuery的示例:

var realWidth = $("#container > .post-it").width();
var realHeight = $("#container > .post-it").height();

$("div.text div:eq(0)").css({"width":realWidth,"height":realHeight});

然后,您需要获取空div的x和y偏移量,并将其作为post-it div的左值和上值应用,使其位于文本的正上方,在指定区域。

简短的回答?号码

长答案?浏览器包含所有选定的内容。避免它被选中的方法是将它放在文档的其他位置,这样它就不会被选中。然后,你使用绝对定位来定位它。这肯定不方便。这不适用于您的“float:right”示例,因为内容在文档中的位置。

无论你做什么,都不要试图使用Javascript来停止复制/粘贴或类似的事情。这只是一种毫无意义的惹恼用户的方式。

结合上述两个答案,一种非常复杂的方法可能是有一个脚注部分,就像打印文本一样,它位于内容下方(就DOM而言),但每个脚注区域都有一个id类似的span footnoted-1 脚注区域得到相应的id,如 footnote-1 然后使用一个不错的js框架,比如jquery,它可以抓取所有脚注,并为它们提供相对于内容区域的位置。

不过,快速注意:我为一个网站尝试了这样的东西(不太花哨,但原理相同),另一个问题很快就变得明显了。有时你的页边空白比相应的段落长,有时一个段落有几个注释。东西很快就会挤得水泄不通,造型也变得毫无用处。

虽然我不喜欢这种风格的网站,但你可能想考虑放弃侧边空白的想法,使用其他网站采用的技术,即以不同的风格(虚线下划线或突出显示的背景)注释文本,用户在文本上悬停时可以看到注释。

您需要对文本内容进行逻辑排序,而不是嵌套,以便单独选择。如果将浮动跨距放在段落的开头,则选择段落文本将按需工作。如果不使用近似的CSS技巧或使用js结合中描述的结构技巧,则不能选择多个段落而中间没有注释 this answer 我完全不推荐。