防止在网格布局中将换行符复制到剪贴板答案

【问题标题】：Prevent line-breaks copied to the clipboard in grid layout防止在网格布局中将换行符复制到剪贴板
【发布时间】：2020-02-05 13:27:14
【问题描述】：

我正在使用我无法修改的给定 HTML 结构。通过 CSS，我将元素排列在视觉上适合我需要的网格布局中，但是在复制文本时，在每个块之间添加了换行符，这是我不想要的。

下面是一个例子：

div {
  display: inline-grid;
  grid-template-columns: repeat(5, auto);
}
span { display: block }

<div>
  <span>1</span><span>+</span><span>3</span><span>=</span><span>4</span>
</div>

使用 Chromium 79，在选择、复制到剪贴板然后将其粘贴到某处时，结果如下：

1
+
3
=
4

在 FireFox 72 中，我得到了我想要的：

1+3=4

【问题讨论】：

我认为这只是部分与来源有关。事实上，我确实从 chrome 中复制了示例中的文本，然后尝试将其粘贴到记事本、notepad++、excel 和 word 中； word 中的结果是“1 + 3 = 4”，而在其他软件中，确实按照您的说明粘贴了换行符。
我应该提一下，我在 Linux 上，实际上我的目标是使用电子的 Discord，但我认为这个问题很普遍。
为什么需要复制输出并粘贴到其他地方？
因为 Discord 是一个消息应用程序，我倾向于复制内容（特别是旧消息）来引用它们。

标签： css css-grid chromium

【解决方案1】：

无论如何，选择内容不会伤害您，但仍然添加一个小解决方案来解决：

<html>
<head>
<style>
div {
  display: inline-grid;
  grid-template-columns: repeat(5, auto);
  display:inline-block;
}

</style>
</head>
<body>
<div>
  <span>1</span>
  <span>+</span>
  <span>3</span>
  <span>=</span>
  <span>4</span>
</div>
</body>
</html>

)

【讨论】：

后面的display 属性覆盖了前面的，所以这不再是一个网格了。
是的！我不认为网格可以处理这个！