Как избежать лишних переносов строк при копировании в Firefox из таблицы? - PullRequest
Новая
       23

Как избежать лишних переносов строк при копировании в Firefox из таблицы?

0 голосов
/ 04 июля 2018

Я пытаюсь сделать исходный код в формате html + css (без javascript), чтобы:

  • Отображается с номерами строк.
  • Номера строк не копируются при выборе кода.
  • Внутренние пробелы / табуляции / новые строки сохраняются.
  • Номера строк генерируются автоматически.

Решение, к которому я пришел, использует счетчики CSS и таблицу, в которой крайний левый столбец - это psuedo-content данных (также помеченный как невыбираемый). Он корректно отображается в Firefox, Safari и Chrome, но существует проблема с копированием текста в буфер обмена.

  • В Chrome и Safari текст, скопированный в буфер обмена, соответствует источнику.
  • В Firefox строки в буфере обмена имеют двойной интервал: между каждой строкой есть дополнительные пустые строки.

На jsfiddle есть демонстрационная версия , которая показывает проблему. Попытка скопировать текст в буфер обмена в Firefox ставит пустую строку между каждой строкой (т. Е. Дополнительные символы новой строки).

Html: 

<pre class="code">
<table style="width: 100%;border-collapse: collapse">
<tr><td class="lnum"></td><td class="content">#include &lt;stdint.h&gt;</td></tr>
<tr><td class="lnum"></td><td class="content">#include &lt;stdbool.h&gt;</td></tr>
<tr><td class="lnum"></td><td class="content"></td></tr>
<tr><td class="lnum"></td><td class="content">/*-</td></tr>
<tr><td class="lnum"></td><td class="content"> | Support for x86 operations that are not exposed natively in C. Each of these</td></tr>
<tr><td class="lnum"></td><td class="content"> | is a fragment of inline-assembly (a way of injecting assembly code into the</td></tr>
<tr><td class="lnum"></td><td class="content"> | compiled program). Each one is wrapped in an inline procedure so that the </td></tr>

Css: 

.code {
  background-color: none;
  border: none;
  padding:0;
}
pre.code {
  line-height: 1.6;
  white-space:   pre-wrap;
  width: 100%;
  margin: 0 auto;
  font-size: 14px;
};
pre.code table {
  counter-reset: linenum;
}
pre.code td.lnum:before {
  content: attr(data-psuedo-content) counter(linenum);
}
pre.code td.content {
  font-size: 14px;
  background: #333740;
  color: #ffffff;
  white-space: pre-wrap;
  padding: 3px;
  border-right: solid 2px black;
}
td.lnum {
  background-color: #a7a8aa;
  color: #000000;
  border-right: 2px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: none;
  font-size:12px;
}
pre.code tr {
  counter-increment: linenum;
}
.lnum { 
  -moz-user-select: none;
  webkit-user-select: none;
  ms-user-select: none;
}

Как обойти это (используя только html + css)?

1 Ответ

0 голосов
/ 04 июля 2018

не добавляйте этот код 

.lnum { 
      -moz-user-select: none;
      webkit-user-select: none;
      ms-user-select: none;
    }
...