Css flexbox向剪贴板添加换行符

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

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

可以在下面的演示中看到，复制文本“LabelMessage”正常工作（粘贴它，它保持一行）。但如果将

display:flex

添加到容器中，则在复制到剪贴板时，会在“Label”之后添加一个换行符

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

小提琴：

$（'.toggleFlex'）。在（'click'，function（）上{
$（'.container'）.toggleClass（'flex'））
})

.container.flex{
显示器：flex；
颜色：红色；
}

切换

标签
消息

如前一个答案中所述，并且：

在flex容器中，子元素（“flex项”）将自动“块化”（）

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

见：

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

和来自：

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

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

$（'.toggleFlex'）。在（'click'，function（）上{
$（'.container'）.toggleClass（'flex'））
})

.container.flex{
显示器：flex；
颜色：红色；
}
.container.flex span{
显示：内容；
}

切换

标签
消息

这个问题在这里已经有了答案@vals oh，有一刻我以为自己比Michael_B聪明，我在做梦：p@vals“已经”——2年后有人问：P但谢谢，它确实回答了问题。注意，它没有移除显示块，它确实移除了容器，只保留了内容

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

-->，因此就像您有此

标签消息

。没有更多的跨度，因此没有更多的问题，您也无法单独设置每个单词的样式这使得在Firefox 60上启用flex时文本不可压缩。@Temaniaf如果这样处理，

DOM

不会受到影响，您也不会丢失任何标记，因此您可以设置每个单词的样式，请选中此项：，除非我误解了你的评论，否则请检查：你不能再使用样式（没有边距、居中等），这就是我的意思。我知道DOM永远不会受到CSS的影响，但它被视为没有包装器，因此，由于没有更多的包装器，您将失去所有常见的功能styling@TemaniAfif我明白你的意思，如果你想设计

span

（flex项）的样式，这不是一个合适的解决方案，但这就是我根据你的用例添加的原因，解决换行问题，有趣的是，您只能更改颜色（以及字体大小和重量…）