如何在不使用浮点数或首字母的情况下创建“浮动”首字下沉？

Question

如何在不使用float或initial-letter的情况下创建这样的“浮动”下降帽？

到目前为止，我从谷歌搜索获得的唯一解决方案是使用float或initial-letter，但两者都不是很好。 float很难突出复制的下降限制，因为::first-letter已从文档流中删除，而initial-letter是实验性的，因此目前无法使用。

Answer 1

我会使用:first-letter来隐藏第一个字母，这样我们仍然可以选择它然后你可以考虑一个带有data属性的伪元素来创建掉卡。

下面是您可以选择整个文本的示例，您还将获得L：

.drop-card:before {
  content:attr(data-l);
  float:left;
  font-size:1.9em;
  margin-right:5px;
}
.drop-card:first-letter {
   font-size:0;
}

<p class="drop-card" data-l="L">
Lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</p>

这是另一个想法，你可以将元素包装在一个跨越浮动元素的范围内：

.drop-card:before {
  content:attr(data-l);
  opacity:0;
  float:left;
  font-size:1.9em;
  margin-right:5px;
}

.drop-card {
  position:relative;
}
.drop-card span {
  position:absolute;
  top:0;
  left:0;
  font-size:1.9em;
}

<p class="drop-card" data-l="L">
<span>L</span>orem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</p>