使不可见文本变得可选择

Question

我正在制作一个支持行折叠的源代码显示。虽然使用 CSS 很容易确保替换文本（“N 行隐藏”）不可选择，但我希望隐藏的源代码仍然被选择，这样用户就可以只选择一段代码，而不必担心是否由于折叠，它的一部分丢失了。有没有一种（不太老套的）方法可以做到这一点？

Answer 1

opacity: 0可以选择带有 的元素，尽管它们是不可见的。

.hidden-selectable {
    display: inline-block;
    width: 1px;
    opacity: 0;
}

<div>Visible<span class='hidden-selectable'>selectable</span></div>

在上面的代码片段中，当选择周围的元素时，“可选择”字符串将出现在选择内容和复制粘贴的文本中。

该元素需要具有非零的宽度和高度，否则它不会出现在选择中。另外，它必须位于元素流内部（即它不能有position: absolute），否则，它不会出现在选择中。因此，我给它一些非常小但非零的宽度，这样它就不会明显影响流量，但仍然“足够可见”以可供选择。

这是小提琴。

这是我尝试过的其他不起作用的方法：

• display: none
• visibility: hidden