为什么从一组 pre 标签复制的文本有双换行符？

Question

我正在编写一个小型库，以 ​​HTML 格式以并排格式呈现 Git 差异。正如人们所期望的那样，左侧面板代表上一次提交，右侧面板代表当前提交。

我希望任一面板都能够使用浏览器的复制和粘贴功能，以便用户可以抓取其中的数据。我发现我排列 HTML 的方式（至少在 Firefox/Ubuntu 中）会导致粘贴的输出在每行末尾有两个换行符，而不是我预期的零或一个。

这是来自我的渲染器的代码演示文稿：

                <div class="line diff-line ">
                    <pre> */</pre>
                </div>
                <div class="line diff-line ">
                    <pre>function deletePost(PDO $pdo, $postId)</pre>
                </div>
                <div class="line diff-line ">
                    <pre>{</pre>
                </div>
                <div class="line diff-line diff-line-added">
                    <pre>   $sqls = array(</pre>
                </div>
                <div class="line diff-line diff-line-added">
                    <pre>       // Delete comments first, to remove the foreign key objection</pre>
                </div>
                <div class="line diff-line diff-line-added">
                    <pre>       &quot;DELETE FROM</pre>
                </div>
                <div class="line diff-line diff-line-added">
                    <pre>           comment</pre>
                </div>
                <div class="line diff-line diff-line-added">
                    <pre>       WHERE</pre>
                </div>
                <div class="line diff-line diff-line-added">
                    <pre>           post_id = :id&quot;,</pre>
                </div>
                <div class="line diff-line diff-line-added">
                    <pre>       // Now we can delete the post</pre>
                </div>

<div> 块是红鲱鱼，事实证明 - 如果它们被剥离，会遇到相同的行为：

                    <pre> */</pre>
                    <pre>function deletePost(PDO $pdo, $postId)</pre>
                    <pre>{</pre>
                    <pre>   $sqls = array(</pre>
                    <pre>       // Delete comments first, to remove the foreign key objection</pre>
                    <pre>       &quot;DELETE FROM</pre>
                    <pre>           comment</pre>
                    <pre>       WHERE</pre>
                    <pre>           post_id = :id&quot;,</pre>
                    <pre>       // Now we can delete the post</pre>

（我不建议将<div>s 从最终解决方案中删除 - 我将它们删除，因为我相信它们不是问题的根源）。

现在，我怀疑一个解决方法是让一组<pre> 标记包裹所有内容，并注意所呈现的差异之外的空白。但是，按照我的安排，我想知道是否有一个 CSS 设置可以放在<pre> 标签上，以防止它们添加不属于那里的空行？

无论如何我都对这种行为感到困惑——因为它们是块级的，我可以理解为什么它们最终会生成一个 NL，但是两个相当奇怪。

There's an illustrative Fiddle here.

Answer 1

我为火狐安装了这个插件来将文本复制为纯文本。这解决了复制和粘贴问题。所以在我看来，问题在于火狐正在复制某种格式。

https://addons.mozilla.org/en-us/firefox/addon/copy-plain-text-2/developers

 pre {
   display: block;
   margin: 0;
}

http://jsfiddle.net/bp4m6baq/2/

并使用插件，然后它才会起作用。