CSS-first-letter实现首字下沉

Posted 2020-08-04

在完成百度IFE任务6时，有一个需要段落中首字下沉的任务，如图：

html代码为：

<div class="ins">
    <p>段落内容...</p>
</div>

css代码为：

.ins:first-letter {
	font-size: 70px;
	color: #F5E327;
	font-family: "微软雅黑";
	float:left;              /*关键属性*/
	line-height: 70px;       /*关键属性*/
}

其中，float可以使文字环绕在下沉的文字周围，line-height可以使下沉文字占据更多的行高，不至于段落中其他文字挤过来。

兼容性：

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 :first-letter 选择器。