我正在尝试在html css（没有javascript）中呈现源代码，以便：
-
它使用行号进行渲染 .
-
选择代码时不会复制行号 .
-
保留内部空格/制表符/换行符 .
-
行号自动生成 .
我到达的解决方案使用CSS计数器和一个表，其中最左边的列是数据伪装内容（也标记为不可选） . 它在Firefox，Safari和Chrome中正确呈现，但将文本复制到剪贴板时出现问题 .
-
在Chrome和Safari中，复制到剪贴板的文本与源匹配 .
-
在Firefox中，剪贴板中的行是双倍行距的：每行之间有多余的空行 .
有一个演示on jsfiddle，显示问题 . 尝试将文本复制到Firefox中的剪贴板会在每一行之间添加一个空行（即额外的换行符） .
HTML：
<pre class="code">
<table style="width: 100%;border-collapse: collapse">
<tr><td class="lnum"></td><td class="content">#include <stdint.h></td></tr>
<tr><td class="lnum"></td><td class="content">#include <stdbool.h></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 回答
不要添加此代码