Question

我有以下html：

<table class="code-table hljs">
  <tbody>
    <tr class="code-row">
      <td class="line-number unselectable">1</td>
      <td class="code-col">one</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">2</td>
      <td class="code-col">two</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">3</td>
      <td class="code-col">three</td>
    </tr>
  </tbody>
</table>

相关的css：

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

在Firefox和Chrome中，如果我选择全部（ctrl-a），我期望发生的事情，只选择“一个”，“两个”和“三个”，而不是行号。但是，当我粘贴剪贴板中的内容时，我会得到不同的结果：

Chrome输出：

one
2 two
3 three

Firefox输出：

one

two

three

所以Chrome正在复制除第一行之外的所有不可选择的行，而firefox正在添加一条不应该有的行。

目前的Chrome版本为54.0.2840.71 m，当前的firefox版本为49.0.2（两者都可以根据http://caniuse.com/#feat=user-select-none使用user-select: none;

目前可以采用css解决方案吗？

修改请注意，我收到的表正在由另一个库呈现，我实际上只能操作这些类。

Answer 1

目前可以采用css解决方案吗？

可以使用HTML解决方案：

<?php
$url = 'https://app.kigo.net/api/ra/v1/ping';
$headers = array( 'Authorization' => 'Basic dXNlcm5hbWU6cGFzc3dvcmQ=', 'Content-Type' => 'application/json' );
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch,CURLOPT_POSTFIELDS, "PING=PONG");
$result = curl_exec($ch);
curl_close($ch);
print_r( $result );
?>

Answer 2

@Rounin几乎拥有它。这是他所做的修改版本。它将显示突出显示1-3但它不会复制。

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  visibility: hidden;
  display: block;
 }


 .code-table {
 counter-reset: code-table;
 }

 .code-table tr td:nth-of-type(2)::before {
 counter-increment: code-table;
 content: counter(code-table) '  \00a0\00a0';
 }

<table class="code-table hljs">
  <tbody>
    <tr class="code-row">
      <td class="line-number unselectable">1</td>
      <td class="code-col">one</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">2</td>
      <td class="code-col">two</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">3</td>
      <td class="code-col">three</td>
    </tr>
  </tbody>
</table>

Answer 3

您可以使用

删除.code-table的第一列

visibility: collapse;

然后，您可以在::before的第二列中部署包含CSS计数器的.code-table伪元素来解决此问题：

＆＃13;

.code-table {
counter-reset: code-table;
}

.code-table tr td:nth-of-type(1) {
visibility: collapse;
}

.code-table tr td:nth-of-type(2)::before {
counter-increment: code-table;
content: counter(code-table) ': ';
}

＆＃13;

<table class="code-table hljs">
  <tbody>
    <tr class="code-row">
      <td class="line-number unselectable">1</td>
      <td class="code-col">one</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">2</td>
      <td class="code-col">two</td>
    </tr>
    <tr class="code-row">
      <td class="line-number unselectable">3</td>
      <td class="code-col">three</td>
    </tr>
  </tbody>
</table>

＆＃13;

HTML表格中不可选择的内容/文本

3 个答案: