html怎么把文字放最下面,html怎么把字放在最中间

首页 > 实用技巧 > 作者:YD1662023-04-28 18:21:28

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

效果图如下:

html怎么把文字放最下面,html怎么把字放在最中间(1)

HTML与CSS 实现段落首字下沉 | 码匠

段落首字下沉 实现方法

1、before伪元素实现

2、使用标签控制

3、first-letter

欢迎沟通交流~HTML5学堂

段落首字下沉 方法分析

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

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

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

段落首字下沉 代码实现

html怎么把文字放最下面,html怎么把字放在最中间(2)

HTML与CSS 实现段落首字下沉 | 码匠

html怎么把文字放最下面,html怎么把字放在最中间(3)

HTML5学堂(码匠) - https://weixin.mj216.com/

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.