我正在制作一个支持折线的源代码显示。虽然使用 CSS 很容易确保替换文本(“N 行隐藏”)不可选,但我希望隐藏的源代码仍然被选中,因此用户只需选择一段代码而不必担心是否由于折叠,它的一部分丢失了。有没有(不太老套)的方法来做到这一点?
问问题
2916 次
2 回答
4
opacity: 0
可以选择带有的元素,尽管它们是不可见的。
.hidden-selectable {
display: inline-block;
width: 1px;
opacity: 0;
}
<div>Visible<span class='hidden-selectable'>selectable</span></div>
In the above snippet, the 'selectable' string will be present in the selection and the copy-pasted text when the elements around it are selected.
元素需要具有非零的宽度和高度,否则它不会出现在选择中。此外,它必须在元素流内部(即它不能有position: absolute
),否则,它也不会出现在选择中。因此我给它一些非常小但非零的宽度,这样它就不会明显影响流动,但仍然“足够可见”可以选择。
这是小提琴。
这是我尝试过的其他不起作用的方法:
display: none
visibility: hidden
于 2016-07-26T12:27:48.960 回答
2
如果你有以下结构:
<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."
}
于 2012-07-16T11:29:37.497 回答