与 CSS "float:right" 类似，但不可选择答案

【问题标题】：Like CSS "float:right", but unselectable与 CSS "float:right" 类似，但不可选择
【发布时间】：2010-11-25 19:57:26
【问题描述】：

我正在尝试做“浮动”所做的事情，但不能选择复制。这是如何使用它的示例：

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

这会在相关文本的右侧制作一个类似“便利贴”的框。如果我选择要复制的文本，则注释也会被复制，并且文本流会中断。

有没有办法解决这个问题？

【问题讨论】：

请参阅sdiz.net/temp/design.html 了解其实际工作原理的示例。仅适用于 IE/FF/Opera/Chrome 的最新版本。

标签： javascript html css css-float

【解决方案1】：

更简单的解决方案

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

潜在的（更困难的）替代方案

作为一个更困难的选择，您可以采用 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 的宽度/高度，使其与 post-it 的宽度/高度相匹配，这可以使用 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 偏移量，并将其应用为便利贴 div 的 left 和 top 值，因此它位于指定区域中的文本顶部.

【讨论】：

能否详细说明“javascript 路由”？如何调整空 div 块的大小？

【解决方案2】：

简短回答？没有。

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

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

【讨论】：

我认为这样做的目的是避免在实际内容中间选择笔记内容，而不是阻止它被完全选中。

【解决方案3】：

结合以上两个答案，一种非常复杂的方法可能是有一个脚注部分，如打印文本，它位于内容下方（就 DOM 而言），但每个脚注区域都有一个跨度像 footnoted-1 这样的 id 和脚注区域获得像 footnote-1 这样的相应 id。然后使用一个不错的 js 框架，比如 jquery，它可以抓取所有脚注并给它们一个相对于内容区域的位置。

不过，请注意：我正在为一个网站尝试这样的事情（不是很花哨，但原理相同），另一个问题很快就变得很明显。有时你的边注比相应的段落长，有时一个段落有几个注释。事情很快变得拥挤，造型变得毫无用处。

虽然我不喜欢这种风格的网站，但您可能想考虑放弃侧边距的想法并使用其他网站采用的技术，即以不同的风格（虚线下划线或突出显示的背景）标注文本并且用户可以在将鼠标悬停在文本上时看到注释。

【讨论】：

【解决方案4】：

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

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

【讨论】：