2

行折りをサポートするソースコード表示を作成しています。置換テキスト (「非表示の N 行」) を選択できないようにするのは CSS で十分簡単ですが、非表示のソース コードを引き続き選択できるようにしたいので、ユーザーはコードのチャンクを選択するだけで、折れにより一部欠損しています。これを行う（あまりハックではない）方法はありますか？

4

2 に答える 2

4

の要素はopacity: 0非表示ですが、選択できます。

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

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

上記のスニペットでは、「選択可能な」文字列が選択範囲内に存在し、その周囲の要素が選択されたときにコピー アンド ペーストされたテキストが表示されます。

要素の幅と高さはゼロ以外である必要があります。そうでない場合、要素は選択範囲に表示されません。また、エレメント フロー内にある必要があります (つまり、 を持つことはできません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 に答える