从flex容器复制的文本中删除换行符 [英] Removing line breaks in text copied from a flex container

问题描述

我有一个应用程序，我们有一个单独的行，这是一个flex容器，包含一些构成行的文本跨度。

导致一个奇怪的场景，如果您复制该线，您会在每个跨度之间获得换行符。如果您使用任何其他方式布置线路，您可以将它全部放在一行中。

我在这里设置了一个codepen 作为例子。复制2行并粘贴到文本编辑器中（或者在这里注释），看看第一行是单行还是第二行变为3行。

这个问题之前有没有人来？这真让我烦恼。我知道我可以重写复制并尝试删除换行符，但是这感觉很不方便。

  div.flex {display：flex;}  

在flex中复制多个跨度的示例。< br />尝试复制并粘贴以下两行：< br />< br />< div class =non-flex> <跨度>这< /跨度> <跨度>为< /跨度> < span> non-flex< / span>< / div>< div class =flex> <跨度>这< /跨度> <跨度>为< /跨度> < span> flex< / span>< / div>

解决方案

如果可能的话，你必须解决这个问题。

在flex容器中，子元素flex items）会被自动封锁（ details ）。
$ b 这意味着flex项目具有块级元素的某些特征，包括占用行中的所有空间。

首先想到的是，通过将Flex项目设置为 display：inline 可以解决问题。但是这种努力是没用的。 flex项目的显示值由flex算法控制，任何覆盖该设置的尝试都会被忽略。

I've got an application where we have a single line which is a flex container, containing a number of spans of text that make up the line.

This leads to a weird scenario, where if you copy the line, you get linebreaks in between each span. Whereas if you use any other way of laying out the line, you get it all in 1 line.

I have set up a codepen here as an example. Copy the 2 lines and paste them into a text editor (or a comment on here) and see how the first is a single line and the second turns into 3 lines.

Has anyone come across this issue before? It's really annoying me. I know I could override the copying and try and remove the newlines, but that feels quite 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>

解决方案

You're going to have to hack your way around this, if possible.

In a flex container the child elements ("flex items") are automatically "blockified" (details).

This means that a flex item takes on some of the characteristics of block-level elements, including taking up all space in the row.

It would seem logical, at first thought, that the problem can be solved by setting flex items to display: inline. But this effort would be useless. The display value of flex items is controlled by the flex algorithm, and any attempt to override that setting is ignored.

这篇关于从flex容器复制的文本中删除换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！