Question

我正在制作支持折叠的源代码显示。虽然使用CSS很容易确保替换文本（“N行隐藏”）不可选，但我希望仍然可以选择隐藏的源代码，因此用户只需选择一大块代码而不用担心是否由于折叠，它的一部分缺失。有没有（不太苛刻）这样做的方法？

Answer 1

如果您有以下结构：

<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."
}

Answer 2

可以选择.hidden-selectable { display: inline-block; width: 1px; opacity: 0; } <div>Visible<span class='hidden-selectable'>selectable</span></div>的元素，但它们不可见。

position: absolute

在上面的代码段中，“可选择的＆＃39;选择时会出现字符串，选择周围的元素时会出现复制粘贴的文本。

元素需要具有非零宽度和高度，否则它不会出现在选择中。此外，它必须在元素流中（即它不能有display: none），否则，它也不会出现在选择中。因此，我给它一些非常小但非零的宽度，因此它不会明显地影响流动，但仍然足够可见＆＃34;可选择。

此处the fiddle。

这里还有我尝试过的其他功能：

visibility: hidden
var dates = '2016-01-01T00:40:00.000+00:00'.split(/-|T|:/); var newDate = new Date(dates[0], dates[1]-1, dates[2], dates[3], dates[4]);

使隐形文本可选

2 个答案: