css - 如何创建 "floated"首字下沉(可能不使用 float 或首字母)？

Question

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

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

Answer 1

我会使用 :first-letter 来简单地隐藏第一个字母，这样我们仍然可以选择它，然后您可以考虑使用具有数据属性的伪元素来创建下拉卡。

这是您可以选择整个文本的示例，您还将获得 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>

这是另一种想法，您可以将元素包装在您放置在 float 元素上的跨度内:

.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>