新しい行に子供を強制することができますが、inline-blockのような子の動作を維持できますか？明確

Question

<div class="content"> 
 
This is the content 
 
    <span class="contentTag"> 
 
    # 
 
    <span>tag1</span> 
 
    </span> 
 
    <span class="contentTag"> 
 
    # 
 
    <span>tag2</span> 
 
    </span> 
 
</div> 
 

 
<br> 
 
<br> 
 
<br> 
 

 
<div>This is how I want it (can't change html structure though, pure css only)</div> 
 
<span>#tag1</span> 
 
<span>#tag2</span>

ためのコードを参照してください。だから、私はChromeの拡張機能を使用してCSSを注入することにより、頻繁に訪れるWebサイトのスタイルをしようとしています。だから私はhtml構造を変更することはできませんし、jsを注入することは実用的ではありません。なぜなら、サイトはjsに大きく依存しており、マークアップを頻繁に変更するからです。

This is the content 
#tag1 #tag2 

を希望

私は過去半時間しようとしてきたが、ちょうどCSSとそれを把握することはできません。それは動的である必要があります。なぜなら、より多くのタグが存在する可能性があり、2行目にすべて適合しなければならないからです（なぜなら、タグが20個あれば、3番目の行か4番目の行になるでしょう）。

これはCSSだけで可能ですか？

EDIT !!!

ごめんなさい。マークアップは少し異なります。私は気付かなかった。そのコードスニペットでは、上記更新

Answer 1

と一致するように更新：

.content span.contentTag:first-child:before { 
    content:""; 
    display: block; 
} 

Answer 2

EDIT：あなたがそうのような最初の子スパンにセレクタの前に追加することができ、新たなマークアップ 予告直接の子セレクタ

.content > :first-child::before { 
 
    content: ''; 
 
    display: block; 
 
}

<div class="content"> 
 
This is the content 
 
    <span class="contentTag"> 
 
    # 
 
    <span>tag1</span> 
 
    </span> 
 
    <span class="contentTag"> 
 
    # 
 
    <span>tag2</span> 
 
    </span> 
 
</div>

Answer 3

：できるようになる前に

.content :first-child::before { 
 
    content: ''; display: block; 
 
}

<div class="content"> 
 
This is the content 
 
    <span class="contentTag">#tag1</span> 
 
    <span class="contentTag">#tag2</span> 
 
</div>