css - style span 仅在 div 的第一行

Question

我有以下 html:

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

我想用“@”分隔它们，但前提是它们在同一行。 我不想使用任何 JS，只使用 CSS。

这是行不通的:

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

我想不出另一个主意。

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

TWO @ WORDS

但是

TWO
WORDS

根据窗口的大小，当 20% 不能容纳两个 @WORDS 时，WORDS 排在第二行，然后我希望“@”消失

Answer 1

最明显的解决方案是使用两个跨度(文本无论如何都应该在文本标签中而不是文本节点中)。

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

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

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

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