flexbox добавляет новую строку в буфер обмена

Я работаю с макетом, который использует 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>

Ответ 1

Как указано в предыдущем ответе и этом сообщении:

В гибком контейнере дочерние элементы ("гибкие элементы") автоматически "блокируются" (более подробная информация)

в зависимости от вашего использования, использование дисплея: содержимое может быть полезно, если вы хотите только скопировать/вставить текст,

см.: как работает содержимое дисплея

Самый простой способ понять, что происходит при отображении: содержимое используется, чтобы представить, что элементы, открывающие и закрывающие теги, исключаются из разметки.

и из спецификации:

Для создания и компоновки ящиков элемент должен обрабатываться так, как если бы он был заменен в дереве элементов его содержимым

(вы можете проверить совместимость этого, поскольку он не будет работать в 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>

Ответ 2

Я думаю, это связано с вычисленным стилем ваших элементов. Когда вы не устанавливаете flex ваш диапазон является встроенным элементом:

Но когда вы устанавливаете display:flex они становятся блочным элементом:

Визуально вы увидите их в одной строке из-за свойства flex, но при копировании/вставке они считаются блочными элементами, поэтому между ними возникает разрыв строки.

Вы можете обратиться к спецификации за дополнительной информацией

К сожалению, я не уверен, есть ли обходное решение, чтобы избежать этого, поскольку мы не можем контролировать вычисленные стили в некоторых случаях, даже если мы вынуждаем его использовать !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>