段落首字下沉

HTML5学堂:在项目中,时常能看到了一种文字展示的特殊效果——首字下沉(如图)。于是花了几分钟考虑了一下使用方法,脑测之后,又敲了敲代码实现了一下,写出来与大家分享一下~~~在这里除了提供了基本解题方法之外,也书写了我的思考过程以及对其他两种可能能用的方法的思考。

效果图如下:

段落首字下沉 实现方法

1、before伪元素实现

2、使用标签控制

3、first-letter

段落首字下沉 方法分析

第一种方法果断舍弃,原因在于,数据明显是从后台传递的,那么此时我们不可能确定后台会传递什么数据。第三种方法也舍弃,原因在于无法实现一个字对应两行的现象。针对第二种方法,进行了如下思考:

三个标签(左侧“独”是一个标签、右侧两行一个标签,两行下面的正常文字一个标签)——果断舍弃这种书写方法,原因在于,对于前后台数据交互实在是太麻烦了。维护起来非常不方便。

使用两个标签,并针对第一个标签进行浮动。利用浮动自身的特性——相信对浮动有所了解的人都会想到浮动元素的基本特性——忘记的话,可以查看该文《浮动元素有何性质》。可以查看文中的第二个例子。此处,对于后台数据传递方面,利用字符串截取,将文字放置于两种标签中。可以用JS截取,也可以直接在获取的时候进行截取(利用后台)

段落首字下沉 代码实现

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

在线商城项目14-阶段性自测与bug修复

前面把商品列表页的查询展示逻辑基本完成了。每个功能单独测试是没有问题了,但是连在一起呢?新增的功能是否会对以前的功能产生影响。

643
来自专栏牛客网

拼多多前端一面面经 && 【更新】热乎二面面经

希望面经积累的人品能进二面吧,总得来说挺简单的 1. 两栏布局,左边固定,要求先加载内容区域,说出多种方法 2 .正则对象test方法和exec方法的不同,分别...

4869
来自专栏jiajia_deng

设置 Notepad++ 制表符(Tab 缩进)宽度为2个空格大小

1142
来自专栏数据小魔方

数据透视表多表合并|字段合并

今天要跟大家分享的内容是数据透视表多表合并——字段合并! 因为之前一直都没有琢磨出来怎么使用数据透视表做横向合并(字段合并),总觉得关于表合并绍的不够完整,最近...

5138
来自专栏章鱼的慢慢技术路

坑爹的奥数——枚举

1596
来自专栏一个会写诗的程序员的博客

前端布局单位选择之 rem

进行布局的话建议用less去写,因为less中可以用变量,这样我们可以省去频繁用计算器的时间了。

521
来自专栏deepcc

css 强制不换行

3339
来自专栏数据小魔方

带涨跌箭头的柱形图

今天要跟大家分享的图表是带涨跌箭头的柱形图! 在簇状柱形图的两个数据条标签上,带上表示涨跌符号的箭头,可以清晰的展现出数据的实际涨跌趋势。 首首先还是来看一下我...

2674
来自专栏CoXie带你学编程

初学Python:写码时应该缩进使用 tab 还是空格?

在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了。空格不会出现这个问题,因为空格就占一个字符的位置。

601
来自专栏CDA数据分析师

【技能get】简单而有效的 EXCEL 数据分析小技巧

作者 CDA 数据分析师 我一直很欣赏 EXCEL 蕴藏的巨大能量。这款软件不仅具备基本的数据运算,还能使用它对数据进行分析。EXCEL 被广泛运用到很多领域...

2359

扫描关注云+社区