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

Question

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

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

这是来 self 的渲染器的一段代码展示:

                <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> block 是一个红色的鲱鱼，事实证明 - 如果它们被剥离，则会遇到相同的行为:

                    <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> 上。标签以防止他们添加不属于那里的空行？

无论如何，我对这种行为感到很困惑——因为它们是 block 级的，所以我可以理解为什么它们最后会生成一个 NL，但是两个就很奇怪了。

There's an illustrative Fiddle here .

Answer 1

我为 fire fox 安装了这个附加组件，以将文本复制为纯文本。这解决了复制和粘贴问题。所以在我看来问题是 fire fox 正在复制某种格式。

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

 pre {
   display: block;
   margin: 0;
}

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

并使用附加组件，只有这样它才能工作。