flexbox将换行符添加到剪贴板 [英] flexbox adding newline to clipboard

问题描述

我正在使用使用flexbox的布局.到目前为止效果很好，但是我无法将文本复制到剪贴板.

I'm working with a layout that uses flexbox. Works good so far but I have a problem with copying text to clipboard.

显然，使用flexbox似乎在每个子节点之后添加了换行符

Apparently, using flexbox seems to add a newline character after each child node

在下面的演示中可以看到，复制文本"LabelMessage"可以正常工作(将其粘贴并保持一行).但是，如果您将display:flex添加到容器中，则在复制到剪贴板上的标签"之后会添加换行符

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?

提琴: 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>

推荐答案

如上一个答案和

在flex容器中，子元素("flex项")会自动被块化"(更多详细信息)

根据您的用例，使用显示:内容如果只想复制/粘贴文本，会很有帮助，

depending on your use case, using display: contents can be helpful if you only want to copy / paste text,

请参阅:显示内容的工作原理

了解显示时发生的事情的最简单方法是:使用内容来想象标记中省略了元素的开始和结束标签.

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.

并来自规范:

出于盒子生成和布局的目的，必须将元素视为在元素树中已被其内容替换

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

((您可能要检查它的兼容性，因为它在IE和Edge中不起作用)

( 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>

这将覆盖由flex容器引起的span的display:block:

this will override the display:block of the span caused by th flex container :

这篇关于flexbox将换行符添加到剪贴板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！