如何创建 "floated" 首字下沉（可能不使用浮点数或首字母）？

Question

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

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

Answer 1

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

这里是一个例子，你可以 select 整个文本，你也会得到 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>

如何创建 "floated" 首字下沉（可能不使用浮点数或首字母）？

How to create a "floated" drop cap (possibly without using float or initial-letter)?

css

properties

css-float