css - flexbox 将换行符添加到剪贴板

Question

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

很明显，使用flexbox好像是在每个子节点后面加一个换行符

在下面的demo中可以看到，复制文本“LabelMessage”正常(粘贴后保持一行)。但是，如果您将 display:flex 添加到容器中，则在复制到剪贴板时会在“Label”之后添加一个换行符

这是什么原因造成的？有什么解决办法吗？

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>

Answer 1

如前一个答案和 this post 中所述:

In a flex container the child elements ("flex items") are automatically "blockified" ( more details )

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

参见: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.

来自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

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