Question

我正在尝试做“浮动”做什么，但不能选择复制。这是如何使用它的一个例子：

<p>
Lorem ipsum dolor sit amet, In a mollis est. Cras vel tortor in purus mattis 
venenatis.
<span style="width: 5em; border: 1px solid black; float: right"> What does "venenatis" means? this is a margin notes! </span>
Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere. Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere.
</p>

这会在相关文字的右侧显示“便利贴”之类的框。如果我选择要复制的文本，也会复制注释，文本流也会被破坏。

有什么方法可以解决这个问题吗？

Answer 1

更简单的解决方案

我能想到的最好的方法是提供文本的替代视图，这是一个打印机友好的版本，不会显示你的便利贴。只要post-it的内容在文本流中，你就会遇到这个问题。

潜力（更难）替代

作为一个更难的选择，你可以去一个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>

使用javascript可以很容易地动态确定empty-div的宽度/高度，使其与post-it的宽度/高度相匹配。这是一个使用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的左侧和顶部值应用，因此它位于文本顶部的指定区域内

Answer 2

简短回答？否。

答案很长？浏览器包括所有选定的内容。避免选择它的方法是将其放在文档中的其他位置，使其不被选中。然后使用绝对定位来定位它。这远非方便。这不适用于您的“float：right”示例，因为内容在文档中的位置。

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

Answer 3

结合上面两个答案，一个非常复杂的做法可能是有一个脚注部分，如印刷文本，它低于内容（就DOM而言），但每个脚注区域都有一个跨度像footnoted-1这样的ID，脚注区域会获得与footnote-1相对应的ID。然后使用一个像jquery这样的好js框架来抓取所有脚注并给它们相对于内容区域的位置。

但请注意：我正在为一个网站尝试类似这样的事情（不是那种花哨但相同的原则），另一个问题很快就显现出来了。有时您的保证金注释比相应的段落长，有时一段会有几个注释。事情变得很快，造型变得毫无用处。

虽然我不是这种网站风格的粉丝，但你可能会考虑放弃边缘边缘的想法并使用其他网站使用的技术，这是以不同的风格（虚线下划线或突出显示的背景）注明文本用户可以在将鼠标悬停在文本上时查看备注。

Answer 4

我所知道的所有浏览器都会选择光源位置之间元素之间的所有文本内容，开始拖动和停止拖动。此外，无论显示位置如何，它们都会以与源相同的顺序出现在剪贴板中。请注意，右侧浮动的内容永远不会显示在源代码之前的内容之前，也会给用户提供线索。

您需要逻辑地订购文本内容而不是嵌套，以便单独选择它。如果您将浮动范围放在段落的开头，则选择段落文本将按您的意愿工作。如果不使用近似的CSS技巧或使用this answer中描述的{{3}}中描述的结构黑客的js，我就不能选择多个段落而不会有注释。

像CSS“浮动：正确”，但无法选择

4 个答案:

更简单的解决方案

潜力（更难）替代