删除从Flex容器复制的文本中的换行符

Question

我有一个应用程序,我们有一行是一个flex容器,包含构成该行的多个文本跨度.

这会导致一种奇怪的情况,如果您复制该行,则会在每个跨度之间获得换行符.然而,如果你使用任何其他方式布置线,你可以在一行中得到它.

我在这里设置了一个codepen作为例子.复制2行并将它们粘贴到文本编辑器(或此处的注释)中,看看第一行是单行,第二行是3行.

之前有没有人come遇到过这个问题？这真让我烦恼.我知道我可以覆盖复制并尝试删除新行,但这感觉非常hacky.

div.flex {
  display: flex;
}

Example of copying multiple spans in flex.
<br /> Try copying and pasting the 2 lines below:
<br />
<br />
<div class="non-flex">
  <span>This</span>
  <span>is</span>
  <span>non-flex</span>
</div>

<div class="flex">
  <span>This</span>
  <span>is</span>
  <span>flex</span>
</div>

Answer 1

你将不得不寻找另一个解决方案。

在 flex 容器中，子元素（“flex items”）会自动“blockified”（details）。

这意味着 flex 项具有块级元素的一些特征，包括占据行中的所有空间。

您可能只想将项目设置为display: inline。这将是浪费时间。displayflex 项的值由 flex 算法控制，任何覆盖该设置的尝试都将被忽略。