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

问题描述

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

这会导致一个奇怪的场景，如果您复制该行，则会在每个跨度之间出现换行符.而如果您使用任何其他方式来布置线条，则可以将其全部放在 1 行中.

我在这里设置了一个代码笔作为例子.复制 2 行并将它们粘贴到文本编辑器(或此处的评论)中，然后查看第一行是如何变成单行而第二行是如何变成 3 行的.

有没有人来遇到过这个问题?这真的让我很烦.我知道我可以覆盖复制并尝试删除换行符，但这感觉很麻烦.

div.flex {显示:弹性；}

在flex中复制多个span的例子.<br/>尝试复制并粘贴以下 2 行:<br/><br/><div class="non-flex"><span>这个</span><span>是</span><span>非柔性</span>

<div class="flex"><span>这个</span><span>是</span><span>flex</span>

解决方案

您将不得不寻找其他解决方案.

在弹性容器中，子元素(弹性项目")会自动阻塞"(详情).

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

您可能想将项目设置为 display: inline.这将是浪费时间.flex 项的 display 值由 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 find another solution.

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.

You may be tempted to just set the items to display: inline. This would be a waste of time. The display value of flex items is controlled by the flex algorithm, and any attempt to override that setting is ignored.

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