Question

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

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

在下面的演示中可以看到，复制文本“LabelMessage”正常工作（粘贴它并保持单行）。但是，如果您将display:flex添加到容器中，则在复制到剪贴板后“Label”之后会添加换行符

造成这种情况的原因是什么？有什么方法吗？

$('.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中所述：

在弹性容器中，子元素（＆＃34;弹性项目＆＃34;）会被自动＆＃34;阻塞＆＃34; （more details）

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

请参阅：how display contents works

了解显示内容时最简单的方法：使用内容是想象从标记中省略元素的开始和结束标记。

和the specification：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这会覆盖由display:block容器引起的span的{{1}}：

Answer 2

我认为这是由于元素的计算风格。如果未设置flex，则跨度为内联元素：

但是当你设置display:flex时，它们就变成了块元素：

从视觉上看，由于flex属性，你会在一行中看到它们，但在进行复制/粘贴时，它们被视为块元素，因此它们之间存在换行符。

您可以参考the specification for more information

不幸的是，我不确定是否有一种解决方法可以避免这种情况，因为即使我们使用!important强制它也无法在某些情况下控制计算出的样式。

.container{
    display: flex;
    color: red;
}
span {
  display:inline!important; /*will have no effect*/
}

<div class="container">
    <span class="label">Label</span>
    <span class="label">Message</span>
</div>

flexbox将新行添加到剪贴板

2 个答案: