当前位置:首页 > 实用技巧 >

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

来源:原点资讯(m.360kss.com)时间:2023-04-28 18:21:28作者:YD166手机阅读>>

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/

栏目热文

html怎么把文字放在最右边(html怎么把文字放在图像右边)

html怎么把文字放在最右边(html怎么把文字放在图像右边)

最近遇到了一个效果:实现个数不等的中文对齐或等宽,于是整理了一下,包括自己搜索到的以及同事提供的方法。实现方法如下所示:...

2023-04-28 18:04:00查看全文 >>

html列表怎么并排(html怎么让两个内容并排)

html列表怎么并排(html怎么让两个内容并排)

学习目标了解常用浏览器掌握web标准理解标签语义化掌握常用的排版标签掌握常用的文本格式化图像链接等标签掌握三种列表标签掌...

2023-04-28 17:42:05查看全文 >>

html如何将文字并排(html中怎样让文字并排)

html如何将文字并排(html中怎样让文字并排)

Html的主体结构标签的分类标签的关系sublime快捷键单标签双标签路径超链接额外知识运用锚点空连接超链接的优化写法 ...

2023-04-28 17:48:23查看全文 >>

html怎么把文字并排(html怎么让同一行字左右分开)

html怎么把文字并排(html怎么让同一行字左右分开)

如有下面的中英文是交错排版的:需要调整为并排排版,效果如下:首先将交错排版的文本复制到Excel,如下:编写VBA代码,...

2023-04-28 17:50:02查看全文 >>

html中怎么把文字写在同一排(html怎么两排文字变一排)

html中怎么把文字写在同一排(html怎么两排文字变一排)

现在这个社会最害怕的是什么,无非是纸上谈兵这样的人,你对问题的见解,你对事情的看法都有很多独到的解释,但是真正地让你带...

2023-04-28 18:02:58查看全文 >>

html怎么让字在同一行(html怎么让在下一行的字靠在一起)

html怎么让字在同一行(html怎么让在下一行的字靠在一起)

1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度、行高及外边距和内...

2023-04-28 17:43:18查看全文 >>

html如何将列表并排(html列表展开与收缩怎么弄)

html如何将列表并排(html列表展开与收缩怎么弄)

哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高...

2023-04-28 18:24:09查看全文 >>

html怎样增加一行(html怎么设置只显示一行)

html怎样增加一行(html怎么设置只显示一行)

代码没有特殊需求,第一列使用bootstrap的符号。删除:class为delectitem添加:class为plusi...

2023-04-28 17:58:29查看全文 >>

html怎么把两个块放在一行(html怎么让两个内容并排)

html怎么把两个块放在一行(html怎么让两个内容并排)

在日常开发网站中,我们常常会用到div容器但是在使用的过程中我们发现div为块级元素会铺满整个宽度但是在一些业务需求中 ...

2023-04-28 18:01:26查看全文 >>

html如何将文字左右都放(HTML如何添加文字)

html如何将文字左右都放(HTML如何添加文字)

在网页开发过程中有些标签的使用频率是非常高的,熟记它们可以非常有效的提高我们的开发速度,下面来看看有哪些标签吧。一、双标...

2023-04-28 18:22:22查看全文 >>

文档排行