2

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

4

2 回答 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 回答