为什么从一组预标记复制的文本有双换行符?

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>从最终解决方案中去掉——我在这里把它们去掉，因为我相信它们不是问题的根源)。

现在，我怀疑一个修复是有一组<pre>标签包装一切，并要小心空白之外的差异被呈现。但是，按照我的安排，我想知道是否有一个CSS设置我可以放在<pre>标签上，以防止他们添加不属于那里的空行?

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

这里有一个说明性的小提琴

Answer 1

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

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

 pre {
   display: block;
   margin: 0;
}

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

和使用插件，只有这样它才能工作