flexbox向剪贴板添加换行符

Question

我正在使用使用 flexbox 的布局。到目前为止效果很好，但我在将文本复制到剪贴板时遇到问题。

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

在下面的demo中可以看到，复制文本“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

如上一个答案和this post中所述：

在弹性容器中，子元素（“弹性项目”）会自动“阻塞”（more details）

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

见：how display contents works

理解使用 display: contents 时会发生什么的最简单方法是想象元素的开始和结束标记从标记中省略。

来自the specification：

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

（您可能需要检查它的兼容性，因为它在 IE 和 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：