我正在制作一个支持折叠行的源代码显示。虽然有CSS可以轻松确保替换文本(“N行隐藏”)不可选择,但我希望隐藏的源代码仍然可以被选择,这样用户就可以选择一块代码而不必担心由于折叠导致部分代码丢失。是否有一种(不太糟糕的)方法来实现这一点?
我正在制作一个支持折叠行的源代码显示。虽然有CSS可以轻松确保替换文本(“N行隐藏”)不可选择,但我希望隐藏的源代码仍然可以被选择,这样用户就可以选择一块代码而不必担心由于折叠导致部分代码丢失。是否有一种(不太糟糕的)方法来实现这一点?
opacity: 0
的元素可以被选择,尽管它们是不可见的。
.hidden-selectable {
display: inline-block;
width: 1px;
opacity: 0;
}
<div>Visible<span class='hidden-selectable'>selectable</span></div>
display: none
- visibility: 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>
.folded {
overflow: hidden;
height: 0px;
}
.info:before {
content: attr(data-lines) " lines hidden."
}