flexbox将新行添加到剪贴板

Question

我正在使用一个使用flexbox的布局.到目前为止工作正常,但我有一个问题,复制文本到剪贴板.

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

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

是什么造成的？它有什么办法吗？

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

Answer 1

正如之前的答案和这篇文章中所指定的：

\n\n

\n

在弹性容器中，子元素（“弹性项目”）会自动“块化”（更多详细信息）

\n

\n\n

根据您的用例，如果您只想复制/粘贴文本，则使用display:contents会很有帮助，

\n\n

请参阅：显示内容如何工作

\n\n

\n

理解使用 display:contents 时发生的情况的最简单方法是想象从标记中省略 element\xe2\x80\x99s 开始和结束标记。

\n

\n\n

并从规范中：

\n\n

\n

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

\n

\n\n

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

\n\n

\n

\r\n

\r\n

$(\'.toggleFlex\').on(\'click\', function() {\r\n  $(\'.container\').toggleClass(\'flex\')\r\n})

\r\n

.container.flex {\r\n  display: flex;\r\n  color: red;\r\n}\r\n\r\n.container.flex span {\r\n  display: contents;\r\n}

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<span class="toggleFlex">toggle</span>\r\n<hr>\r\n<div class="container">\r\n  <span class="label">Label</span>\r\n  <span class="label">Message</span>\r\n</div>\r\n<hr>\r\n<textarea></textarea>

\r\n

\r\n

\r\n

\n\n

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

\n\n

\n