HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS结构样式 ——> CSS样式 | 段落首字下沉

CSS样式 | 段落首字下沉

2015/04/27 14:08:00 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS结构样式 | 关键词:HTML,段落首字下沉

HTML+CSS 实现段落首字下沉

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

效果图如下:

HTML5 学堂 HTML+CSS 实现段落首字下沉 h5course

段落首字下沉 实现方法

1、before伪元素实现

2、使用标签控制

3、first-letter

欢迎沟通交流~HTML5学堂

段落首字下沉 方法分析

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

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

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

段落首字下沉 代码实现

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>H5course - 独行冰海</title>
  6. <style>
  7. .wrap span {
  8.     float: left;
  9.     width: 40px;
  10.     height: 40px;
  11.     text-align: center;
  12.     line-height: 40px;
  13.     font-size: 32px;
  14.     font-weight: bold;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19.     <div class="wrap">
  20.         <span>独</span><p>行冰海——白色,是我的世界的颜色,独特而隐逸。我的“自由”不单纯是不让别人决定我的人生,还是认识我的个性,维护我的个性,决定我生活目标的代名词;也从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。</p>
  21.     </div>
  22. </body>
  23. </html>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端