Menu
I'm working with a layout that uses flexbox. Works good so far but I have a problem with copying text to clipboard.
Apparently, using flexbox seems to add a newline character after each child node
It can be seen in the demo below, copying text "LabelMessage" works normally (paste it and it remains one-line). But if you add display:flex to container a newline is added after "Label" upon copying to clipboard
What is causing this? Is there any way around it?
Fiddle: http://jsfiddle.net/zv4mamtm/
$('.toggleFlex').on('click', function() {
$('.container').toggleClass('flex')
}).container.flex {
display: flex;
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggleFlex">toggle</span>
<hr>
<div class="container">
<span class="label">Label</span>
<span class="label">Message</span>
</div>
<hr>
<textarea></textarea>
900
break should take up 100% of the width of the container (because we set flex-basis: 100% ), the breaking flex item needs to sit on its own row to accomplish that. It can't share a row with the first item so it will break to a new row, which will leave the first item alone on one row.
Making things wrap If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.
As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
As specified in the previous answer and this post :
In a flex container the child elements ("flex items") are automatically "blockified" ( more details )
depending on your use case, using display: contents can be helpful if you only want to copy / paste text,
see : how display contents works
The easiest way to understand what happens when display: contents is used is to imagine the element’s opening and closing tags being omitted from the markup.
and from the specification :
For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents
( you might want to check the compatibility of this as it won't work in IE and Edge )
$('.toggleFlex').on('click', function() {
$('.container').toggleClass('flex')
}).container.flex {
display: flex;
color: red;
}
.container.flex span {
display: contents;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggleFlex">toggle</span>
<hr>
<div class="container">
<span class="label">Label</span>
<span class="label">Message</span>
</div>
<hr>
<textarea></textarea>this will override the display:block of the span caused by th flex container :
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
