Remove line breaks in text copied from flex container
I have an application where we have one line which is a flex container containing multiple lines of text that make up a line.
This leads to a weird scenario where if you copy a string you get gaps between them. If you use any other way of laying the line, you will get everything in 1 line.
I created some code here as an example . Copy 2 lines and paste them into a text editor (or comment here) and see how the first is one line and the second is 3 lines.
Anyone else come
on this issue? It really annoys me. I know I can override copy and try to delete newlines, but that looks pretty 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>
source to share
You will need to find another solution.
In a flex container, "flex items" are automatically "locked" ( details ).
This means that a flex item takes on some of the characteristics of block-level items, including taking up all the space in a row.
You might be tempted to just set the items for display: inline
. It would be a waste of time. display
the value of flex items is controlled by the flex algorithm, and any attempt to override this setting is ignored.
source to share
This issue only exists for Chrome. In Firefox, those <span/>
inside a flex container do not produce a line break when copied, but <div/>
they do.
Installing the display on something else, for example inline-block
, will fix the problem.
If you need to use flex, you can change the copy event and change the clipboard data: https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event#Live_example
source to share