如何创建“浮动”首字下沉（可能不使用浮动或首字母）？答案

【问题标题】：How to create a "floated" drop cap (possibly without using float or initial-letter)?如何创建“浮动”首字下沉（可能不使用浮动或首字母）？
【发布时间】：2019-02-23 10:38:49
【问题描述】：

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

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

【问题讨论】：

标签： css properties css-float

【解决方案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>

这是另一个想法，您可以将元素包装在您定位在浮动元素上的跨度内：

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

【讨论】：

这有点用，但不会让用户感到困惑吗？从视觉上看，您仍然无法突出显示首字下沉。
你让读者失望了。问题是“如何在不使用浮动或首字母的情况下创建“浮动”首字下沉？ - 在您的第一个和第二个示例中，您使用了浮点数。
@JaredNewnam 完全阅读了这个问题。 OP 要求不要使用浮点数，因为他没有成功地用浮点数做出好的东西，但我能够做到。值得注意的是，OP 接受了我的回答。
@JaredNewnam 没有什么可编辑的，问题很清楚（答案也是）
认真的吗？我一直在网上搜索“如何在没有浮动的情况下创建一个dropcap”，这个SO问题突然出现了。这个问题没有用，因为答案没有回答 OP 的问题。我很高兴 OP 接受了您的回答，但这个问题措辞不佳，特别是因为 SEO 将搜索引擎指向它，而这与我正在寻找的相反。