样式跨度仅在div的第一行

Question

我有以下html：

<div class="pp">TWO <span>WORDS</span>
</div> 

我想通过＆＃34; @＆＃34;将它们分开。例如，但只有当它们在同一条线上时。 我不想使用任何JS，只有CSS。

这不起作用：

.pp{
    width:20%;
}
.pp::first-line  span:before{
    content: " @ "
}

我无法提出另一个想法。

请注意，我希望同一个元素具有或不具有@取决于它是否出现在同一个通道上。 E.g。

TWO @ WORDS

但是

TWO
WORDS

根据窗口的大小，当20％不能适合TWO @ WORDS时，WORDS会进入第二行，然后我想要＆＃34; @＆＃34;消失

Answer 1

最明显的解决方案是使用两个跨度（文本应该在文本标签中，而不是文本节点）。

然后，您可以定位第二个子项并使用:before。

＆＃13;

＆＃13;

.pp {
  width: 20%;
}
.pp span:nth-child(2):before {
  content: '@';
}

＆＃13;

<div class="pp">
  <span>TWO</span>
  <span>WORDS</span>
</div>

<div class="pp">
  <span>ONE</span>
</div>

＆＃13;

＆＃13;

＆＃13;