flexbox 将换行符添加到剪贴板 [英] flexbox adding newline to clipboard
问题描述
我正在处理使用 flexbox 的布局.到目前为止效果很好,但我在将文本复制到剪贴板时遇到了问题.
显然,使用 flexbox 似乎在每个子节点后添加一个换行符
在下面的演示中可以看到,复制文本LabelMessage"正常工作(粘贴它并保持一行).但是,如果您将 display:flex
添加到容器,则会在复制到剪贴板时在标签"之后添加换行符
这是什么原因造成的?有什么办法可以解决吗?
小提琴:
$('.toggleFlex').on('click', function() {$('.container').toggleClass('flex')})
.container.flex {显示:弹性;红色;}.container.flex 跨度{显示:内容;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><span class="toggleFlex">toggle</span><小时><div class="容器"><span class="label">Label</span><span class="label">消息</span>
<小时><textarea></textarea>
这将覆盖由 flex
容器引起的 span
的 display:block
:
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>
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 :
这篇关于flexbox 将换行符添加到剪贴板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!