Html 使用CSS在第三行之后放置一个元素

我有以下HTML代码：

<style>
  .ad { margin: 15px; height: 30px; background-color: #7f7f7f; }
  .article { width: 300px; font-size: 24px; line-height: 30px; border: 1px solid; }
</style>
<div class="ad"></div>
<div class="article">
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
</div>

我想在文章里放一则广告，但我希望总是在第三行和第四行之间。 这是否可能只使用CSS？ 如果没有，是否有任何方法可以使用Javascript或PHP实现这一点？ 我有一个PHP字符串的文章，但我不知道第三行在哪里

请注意，这篇文章是HTML格式的，可能包含HTML标记，因此我无法计算字符数。 此外，.ad标记可以在.article标记之前或之后

---

提前感谢您的宝贵帮助

在html中，不能使用Enter键转到下一行，换行标记在html中。 因此，您的代码必须如下所示：

<div class="article">
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
</div>

---

你必须自己打断文章，这样广告才能正确放置。文章是从500多个RSS源自动导入的，它们没有相同的布局。你能给我建议一种自动的方式把广告放在第三行之后吗？我想，你可以尝试破解数据。。例如，在设置.article之后，获取其中设置的文本而不是html，并获取设备宽度。然后试着找出文本中第三行的结尾，并在其中添加一个div。然后你可以把广告放到你添加的新分区中。@Sachin听起来很有趣，但我不知道怎么做。你能帮我写下答案吗？谢谢我知道这一点。但我的问题不同！文章在一行中，并自动包装。

$(".article br:nth-child(3)").after('<div class="ad"></div>');