Question

我添加了用户拖动选择文本进行复制的选项（使用CSS属性user-select）。问题是它还复制了其他HTML元素的文本：

<div class='select'>text</div>
<div class='no-select'>
    <b>no-select text</b>
</div>
<div class='select'>text</div>

所以我得到了：

text

no-select text

text

有什么想法吗？

Answer 1

您可以使用:before或:after pseudo-elements完成此操作：

<强> HTML

<div class="select">text</div>
<div class="no-select">
    <strong data-text="no-select text">no-select text</strong>
</div>
<div class="select">text</div>

<强> CSS

div.no-select > strong[data-text]:after {
    content: attr(data-text);
}

JSFiddle Demo

Answer 2

.no-select{ user-select: none; }

您可以使用user-select: none来实现此目的。只需注意兼容性（http://caniuse.com/user-select-none），注意您必须包含-ms-，-moz-和-webkit-的供应商前缀。

请记住，如果1）用户使用的浏览器不支持此CSS，或2）他们查看HTML源代码，他们仍然可以复制文本。

禁用在HTML元素中选择文本

2 个答案: