刪除換行符在文本從柔性容器

我有，我們有一個單一的線是柔性容器中的應用程序複製包含多個文本的跨度組成生產線。刪除換行符在文本從柔性容器

這導致了一個奇怪的場景，在這裏，如果你複製的訂單，你在每個跨度之間得到換行符。而如果您使用任何其他方式佈置線路，則您可以將它全部放在一行中。

I have set up a codepen here，例如，複製2行並將它們粘貼到文本編輯器（或這裏的註釋）中，看看第一行是單行，第二行是三行。

有沒有人come過這個問題之前？這真讓我煩惱。我知道我可以覆蓋複製並嘗試刪除換行符，但這感覺很不方便。

div.flex { 
 
    display: flex; 
 
}

Example of copying multiple spans in flex. 
 
<br /> Try copying and pasting the 2 lines below: 
 
<br /> 
 
<br /> 
 
<div class="non-flex"> 
 
    <span>This</span> 
 
    <span>is</span> 
 
    <span>non-flex</span> 
 
</div> 
 

 
<div class="flex"> 
 
    <span>This</span> 
 
    <span>is</span> 
 
    <span>flex</span> 
 
</div>

來源

2017-05-08 YaManicKill

您的CodePen正確使用'display：inline-flex'而不是'display：flex'，並將兩者都顯示爲一行。您所描述的問題不可見。 –

嘿，我正在測試東西，看到這是一個選項，並嘗試它，但它沒有奏效。你使用的瀏覽器在哪裏工作？ – YaManicKill

Chrome版本58.0.3029.96 –

你將不得不破解解決這個自己的方式。

在flex formatting context中，柔性容器的孩子（柔性物品）被自動「封鎖」（details）。

這意味着，柔性物品採取一些的塊級元素的特性和他們的display值被重寫/忽略。

來源

2017-05-08 11:52:53

我很擔心這可能是答案。不管怎麼說，還是要謝謝你：-） – YaManicKill

刪除換行符在文本從柔性容器

回答

相關問題