如何在不使用float或首字母的情况下创建“ floated”首字下沉？

Question

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

到目前为止，我从谷歌搜索中获得的唯一解决方案是使用float或initial-letter，但都不是很好。由于float已从文档流中删除，而::first-letter是实验性的，因此目前无法使用。{p>

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>