9

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>
YaManicKill
  • 173
  • 6
  • Your CodePen correctly uses `display: inline-flex` instead of `display: flex`, and displays both as a single line. The problem you're describing is not visible. – J. Titus May 08 '17 at 11:54
  • Hey, I was testing around with stuff and saw that was an option, and tried it, but it didn't work. What browser were you using where it worked? – YaManicKill May 08 '17 at 12:40
  • Chrome Version 58.0.3029.96 – J. Titus May 08 '17 at 12:42
  • That's odd, I couldn't get it to work and I'm using the exact same version of Chrome. The second line, even with inline-flex, was still split across 3 lines after copying to the clipboard and pasting into something like notepad. – YaManicKill May 08 '17 at 12:53

2 Answers2

11

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

This problem only exists for Chrome. In Firefox, those <span/>s inside a flex container dont produce a line break upon copying, but <div/>s do.

Setting the display to something else like inline-block will fix the problem.

If you need to be using flex, you can modify the copy event and alter the clipboard data: https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event#Live_example

phil294
  • 10,038
  • 8
  • 65
  • 98