HTML+CSS 实现段落首字下沉
2015年03月21日 14:31
0 点赞
0 评论
更新于 2025-11-21 17:58
昨晚，我发现了一种特殊的文字展示效果——首字下沉（见下方效果图）。经过几分钟的思考和代码实践，我成功实现了这一效果，现在将其分享给大家。
实现方法
1. ::before 伪元素实现
2. 使用标签控制
3. ::first-letter
方法分析
::before伪元素实现：这种方法需要舍弃。因为数据通常是从后台传递的，我们无法确定后台会传递什么样的数据，使用::before伪元素难以应对这种不确定性。::first-letter：此方法也不可行。它无法实现首字对应两行文字的效果。- 使用标签控制：
- 三个标签方案：最初考虑使用三个标签，即左侧首字一个标签、右侧两行文字一个标签、两行文字下面的正常内容一个标签。但这种书写方式会使前后台数据交互变得非常麻烦，维护起来也极为不便，因此舍弃。
- 两个标签方案：最终采用两个标签的方案，并对第一个标签设置浮动。对于熟悉浮动特性的开发者来说，应该清楚浮动元素会脱离文档流，使文本环绕其周围。如果忘记浮动元素的特性，可以查看《浮动元素有何性质》这篇文章，参考其中的第二个例子。在处理后台数据传递时，可以利用字符串截取的方式将文字分别放置于两个标签中。既可以使用 JavaScript 进行截取，也可以在后台获取数据时直接进行截取。
代码实现首字下沉
以下是实现首字下沉效果的 HTML 和 CSS 代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course - 独行冰海</title>
<style>
.wrap span {
float: left;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrap">
<span>独</span>
<p>行冰海——白色，是我的世界的颜色，独特而隐逸。我的“自由”不单纯是不让别人决定我的人生，还是认识我的个性，维护我的个性，决定我生活目标的代名词；也从不以“地位”、“权力”为目标，只为了自己心底的梦、珍重的事、守护的情而奋斗。</p>
</div>
</body>
</html>
欢迎大家互相学习交流。