段落首字下沉
时间:2022-05-04
本文章向大家介绍段落首字下沉,主要内容包括段落首字下沉 实现方法、段落首字下沉 方法分析、段落首字下沉 代码实现、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
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>
- 算法模板——splay区间反转 1
- 3223: Tyvj 1729 文艺平衡树
- 1212: [HNOI2004]L语言
- POJ 2942Knights of the Round Table(tarjan求点双+二分图染色)
- 算法模板——平衡树Treap
- Java并发编程
- 算法模板——线段树2(区间加+区间乘+区间求和)
- 1798: [Ahoi2009]Seq 维护序列seq
- 【LeetCode 389】 关关的刷题日记30 Find the Difference
- 1708: [Usaco2007 Oct]Money奶牛的硬币
- 1856: [Scoi2010]字符串
- 【LeetCode 409】 关关的刷题日记31Longest Palindrome
- Git的奇技淫巧?
- 3224: Tyvj 1728 普通平衡树
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C++核心准则T.11:只要可能就使用标准概念
- 给pugjs的stun主题添加canvas时钟
- C++核心准则T.12:声明局部变量类型时,概念比auto更好
- Arch Linux切换rEFInd开机引导程序
- C++核心准则T.13:对于简单的,单类型参数概念,使用缩略记法更好
- VBA编写Ribbon Custom UI编辑器08——实现ZIP的写入
- 用 Python 写个七夕表白神器
- 3分钟短文 | Laravel 用户授权原来内置了这么多方法
- E0144"const char *" 类型的值不能用于初始化 "char *" 类型的实体的三种解决方法
- 数据采集面对JS加密无所适从?善用这3个工具,搞定一大半的JS逆向!
- 点赞功能设计与实现
- [推荐]Linux入门系列(一)换个角度看Linux其实很简单,带你一起入门
- (建议收藏)Java基础知识笔记(详细)
- 详解:小程序如何授权登录并获取用户绑定手机号?
- [Bazel]自定义命令行编译标志