【html段落首字】HTML和CSS首字下沉|码制造者

HTML5学堂(码工):项目中经常可以看到文字展示的特效3354号下沉(见图)。所以用了几分钟的方法，大脑测试后又敲代码实现了~ ~ ~除了在这里提供基本的解题方法外，还写了我的思考过程和其他两种可能方法的思考。

渲染如下：

HTML和CSS首字下沉|码制造者

首字下沉字符的实现方法

1、实施before伪要素

2、使用标签控制。

3、first-letter

欢迎沟通~HTML5学堂

段落首字母下沉方法分析

第一种方法果断废弃。原因是数据显然是在后台传递的。那么，无法确定后台传递的是什么数据。第三种方法也放弃，因为无法实现一个字对应两行的现象。关于第二种方法，我认为：

三个标签(左边的“单独”是一个标签，右边两行，两行以下的一个纯文字标签)——果断丢弃了这种写入方法，因为前后台数据交互太麻烦。维持很不方便。

使用两个标记使第一个标记浮动。相信利用浮体本身的特性——，对浮体有所了解的人都会想起浮体元素的基本特性。此处，对于后台数据传输，请使用字符串裁剪将字符放置在两个标签上。用JS剪切或获取时可以直接剪切(使用背景)。

首字下沉字符代码的实现

HTML和CSS首字下沉|码制造者

HTML5学堂(院子工匠)-