使不可见文本可选择

Question

使不可见文本可选择

htmlcsshiddenhtml-select

3

我正在制作一个支持折叠行的源代码显示。虽然有CSS可以轻松确保替换文本（“N行隐藏”）不可选择，但我希望隐藏的源代码仍然可以被选择，这样用户就可以选择一块代码而不必担心由于折叠导致部分代码丢失。是否有一种（不太糟糕的）方法来实现这一点？

- larsrc

你想让用户不能选择这个东西。 - undefined

2个回答

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

- Jerome

尝试过这种方法但没有成功（在Chrome浏览器中，使用-webkit-user-select）。结果发现，虽然替换文本不可选择，但仍会被复制:( 目前唯一阻止复制的方法是将其作为一个经过严格样式设计的输入标签的值。 - undefined

1

overflow: hidden + height: 0px 在Chrome中无法使隐藏的文本可复制。 - undefined

有一种方法可以使文本在Chrome、Firefox和Safari中可见但无法复制。请参阅stackoverflow.com/a/21884413/691281。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stefan Dragnev · Accepted Answer

opacity: 0 的元素可以被选择，尽管它们是不可见的。

.hidden-selectable {
    display: inline-block;
    width: 1px;
    opacity: 0;
}

<div>Visible<span class='hidden-selectable'>selectable</span></div>

在上面的代码片段中，“selectable”字符串将出现在选择和复制粘贴文本中，当其周围的元素被选择时。

该元素需要具有非零宽度和高度，否则它不会出现在选择中。此外，它必须位于元素流中（即不能具有“position: absolute”），否则它将不会出现在选择中。因此，我给它一些非常小但非零的宽度，这样它就不会在视觉上影响流，但仍然“足够可见”以便选择。

这里是 fiddle。

这是我尝试过但不起作用的其他内容：

- display: none - visibility: hidden