css - 可以强制 child 换行但保持 child 的行为，如内联 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 扩展程序注入(inject) css 来设置我经常访问的网站的样式。所以我无法更改 html 结构并且注入(inject) js 是不切实际的，因为该站点严重依赖 js 并且经常更改标记。

需要

This is the content
#tag1 #tag2

过去半小时我一直在尝试，但无法仅使用 CSS 解决问题。但它必须保持动态，因为可能有更多标签，它们都应该放在第二行(在合理范围内，当然，如果我有 20 个标签，它会进入第三行或第四行)。

仅使用 CSS 是否可行？

编辑!!!

对不起大家。标记有点不同。我没有注意到。它在上面的代码片段中更新了

Answer 1

您可以像这样将 before 选择器添加到第一个子 span 中:

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