Removing line breaks in text copied from a flex container [duplicate]

Question

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>

Answer 1

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.