HTML5学堂(码匠):在项目中,时常能看到了一种文字展示的特殊效果——首字下沉(如图)。于是花了几分钟考虑了一下使用方法,脑测之后,又敲了敲代码实现了一下,写出来与大家分享一下~~~在这里除了提供了基本解题方法之外,也书写了我的思考过程以及对其他两种可能能用的方法的思考。
效果图如下:
HTML与CSS 实现段落首字下沉 | 码匠
段落首字下沉 实现方法1、before伪元素实现
2、使用标签控制
3、first-letter
欢迎沟通交流~HTML5学堂
段落首字下沉 方法分析第一种方法果断舍弃,原因在于,数据明显是从后台传递的,那么此时我们不可能确定后台会传递什么数据。第三种方法也舍弃,原因在于无法实现一个字对应两行的现象。针对第二种方法,进行了如下思考:
HTML与CSS 实现段落首字下沉 | 码匠
HTML5学堂(码匠) - https://weixin.mj216.com/
,