Removing Line Breaks In Text Copied From A Flex Container

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

Solution 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.

Solution 2:

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