我正在制作一个支持换行的源代码显示。虽然使用CSS可以很容易地确保替换文本（"隐藏的N行"）是不可选择的，但我希望隐藏的源代码仍然可以被选择，这样用户就可以选择一块代码，而不用担心它的一部分是否因折叠而丢失。有没有一种（不太古怪的）方法可以做到这一点？
可以选择具有opacity: 0的元素，尽管它们是不可见的。
.hidden-selectable {
display: inline-block;
width: 1px;
opacity: 0;
}
<div>Visible<span class='hidden-selectable'>selectable</span></div>
在上面的代码段中，当选择了"可选"字符串周围的元素时，该字符串将出现在选择和复制粘贴的文本中。
元素的宽度和高度必须为非零，否则它不会出现在选择中。此外，它必须在元素流内部（即它不能有position: absolute），否则，它不会再次出现在选择中。因此，我给它一些非常小但非零的宽度，这样它就不会明显影响流量，但仍然"足够可见"，可以选择。
这是小提琴。
以下是我尝试过的其他不起作用的东西：
display: nonevisibility: hidden
如果您有以下结构：
<html>
<body>
<div>before</div>
<div class="folded">this is the hidden source code</div>
<div class="info">N lines hidden</div>
<div>after</div>
</body>
</html>
你应该擅长这个CSS：
.folded {
overflow: hidden;
height: 0px;
}
.info {
-moz-user-select: none;
//add other browsers' variation
}
编辑：另一个选项（未在Chrome中测试）
HTML:
<html>
<body>
<div>before</div>
<div class="folded">this is the hidden source code</div>
<div class="info" data-lines='5'> </div>
<div>after</div>
</body>
</html>
CSS：
.folded {
overflow: hidden;
height: 0px;
}
.info:before {
content: attr(data-lines) " lines hidden."
}