html 首行缩进2字符

1. html 首行缩进2字符

1.1. 场景

  在Html开发中让一段文字(富文本等)首行缩进两个文字,可能在前面加上8个“ ”,因为过去对CSS不熟悉,这种方法实现虽然比较直接,但是文字多的时候会有很多“ ”充斥在代码中,代码会显得比较乱,现在我们实现这种效果就简单多了,直接在CSS样式代码中加入。可以使用text-indent属性来设置段落空两格,只需要给元素设置“text-indent:2em;”样式即可。text-indent属性规定文本块中首行文本的缩进,该属性允许使用负值;如果使用负值,那么首行会被缩进到左边。

text-indent:2em;

  这样就很容易实现文本段落的缩进
在这里插入图片描述

1.2. 说明

 <div style="text-indent:2em;" class="news-content" id="news_content"></div>;

1.2.1. text-indent:2em;

  text的意思是文本,indent在计算机英语中意思是缩进,至于后面的2em意思就是2个相对单位;

1.2.2. em

  em这个单位的意思就是文字的高度,1em就是1个文字的高度,2em就是两个文字高度,所以我们写的“text-indent:2em;”的意思就是,文本缩进2个文字的高度,因为汉字是方块字,高度和宽度是一样的,所以缩进2个文字的高度,就等于缩进两个文字的宽度,最后的效果就是缩进了两个文字。

1.2.3. 适用范围

  对于"text-indent:2em;"属性,使用CSS的text-indent属性可以定义文本段落中的首行字体缩进的效果。使用该属性只对元素中的段落产生影响。对于使用,标签产生的换行效果,并不起作用。只能加在块状元素上面,内联元素是不起作用的。

1.3. 使用

  在CSS样式表中设置文本首行缩进的样式规则。代码如下:

div{
text-indent:2em;
font-size:29px;
width:900px;
}

  div标签选择器使用text-indent属性将段落首行缩进2em,这是两个汉字字符的宽度。使用font-size属性将字体大小设置为29px,使用width属性将div元素的宽度设置为900px,都是为了使效果能够更好地显示。

  在HTML网页中添加要使用标签选择器的div元素内容。代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>缩进2字符</title><style type="text/css">p {text-indent: 2em;font-size: 29px;width: 900px;}</style>
</head>
<body>
<p>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据!</p>
<p>测试!</p>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/404395.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习设计模式之外观模式

文章目录 前言一、介绍二、特点三、详细分析1.核心组成2.代码示例3.优缺点优点缺点 4.使用场景 总结 前言 外观模式是结构型设计模式&#xff0c;定义一个高层接口&#xff0c;用来访问子系统中的众多接口&#xff0c;使系统更加容易使用。 一、介绍 外观设计模式&#xff08…

机器学习第十二章-计算学习理论

目录 12.1基础知识 12.2 PAC学习 12.3有限假设空间 12.3.1可分情形 12.3.2不可分情形 12.4VC维 12.5 Rademacher复杂度 12.1基础知识 计算学习理论研究的是关于通过"计算"来进行"学习"的理论&#xff0c;即关于机器学习的理论基础&#xff0c;其目的…

encoding with ‘idna‘ codec failed (UnicodeError: label empty or too long)

今天在使用Flask连接mysql的时候&#xff0c;遇到了一个报错&#xff1a;encoding with ‘idna’ codec failed (UnicodeError: label empty or too long) 网上查了一下说是字符集的问题&#xff0c;然后尝试修改了一下字符集&#xff0c;结果还是不行。 最后去翻阅SQLAlchemy…

汇昌联信科技做拼多多电商有哪些策略?

在当今竞争激烈的电商平台上&#xff0c;汇昌联信科技以其独到的策略成功立足拼多多。他们不仅凭借对市场的深刻理解&#xff0c;还通过一系列创新举措&#xff0c;实现了品牌的快速成长和市场份额的不断扩大。接下来&#xff0c;我们将深入探讨汇昌联信科技在拼多多平台上所采…

Python爬虫案例一:获取古诗文并按用户输入的作者名进行数据保存

前言&#xff1a; 1、什么是爬虫&#xff1f;也称为网页蜘蛛&#xff08;Web Spider&#xff09;&#xff0c;通俗来说&#xff0c;解放人的双手, 去互联网获取数据, 以数据库, txt, excel, csv, pdf, 压缩文件, image, video, music保存数据。本质: 模拟浏览器, 向服务器发送…

高性能 Web 服务器:让网页瞬间绽放的魔法引擎(上)

目录 一.Apache介绍 1.Apache prefork 模型 2.Apache worker 模型 3.Apache event模型 二.Nginx介绍 1.什么是Nginx 2.Nginx 功能介绍 3.Nginx基础特性 4.Nginx 进程结构&#xff1a;web请求处理机制 5.主进程(master process)的功能&#xff1a; 6.工作进程&#x…

k8s基础概念以及部署

kubernetes基础概念 来历 kubernetes以谷歌borg为前身&#xff0c;基于谷歌15年生产环境经验开源的一个项目。k8s是一个开源&#xff0c;的分布式的容器编排技术。 k8s的优势 对比对象 裸容器 例如docker&#xff0c;直接将容器部署在宿主机的方式被称为裸容器。 缺点 纯粹的裸…

使用docker-compose运行kafka及验证(无需zookpeer)

前言&#xff1a;要求安装docker-compose kafka镜像版本&#xff1a;apache/kafka:3.8.0 可能存在镜像拉不下来的情况&#xff1a; 1、vim /etc/docker/daemon.json {"data-root":"/data/docker","registry-mirrors": ["https://docker.m…

【C++二分查找】875. 爱吃香蕉的珂珂

本文涉及的基础知识点 C二分查找 LeetCode875. 爱吃香蕉的珂珂 珂珂喜欢吃香蕉。这里有 n 堆香蕉&#xff0c;第 i 堆中有 piles[i] 根香蕉。警卫已经离开了&#xff0c;将在 h 小时后回来。 珂珂可以决定她吃香蕉的速度 k &#xff08;单位&#xff1a;根/小时&#xff09;…

Golang基于DTM的分布式事务SAGA实战

SAGA介绍 SAGA是“长时间事务”运作效率的方法&#xff0c;大致思路是把一个大事务分解为可以交错运行的一系列子事务的集合。原本提出 SAGA 的目的&#xff0c;是为了避免大事务长时间锁定数据库的资源&#xff0c;后来才逐渐发展成将一个分布式环境中的大事务&#xff0c;分…

The Sandbox 新提案: 2024 年亚洲和拉丁美洲区块链活动预算

理事会建议&#xff1a; 积极 &#x1f642; 内容 此提案请求为2024年第四季度&#xff0c;The Sandbox 在东南亚和拉丁美洲的主要区块链活动中的激活分配 94,500 美元的 SAND 倡议预算。&#xff08;具体活动列表见下方活动描述&#xff09; 原因 区域团队希望在这些现场活…

一文学会本地部署可视化应用JSONCrack并配置公网地址实现远程协作

文章目录 前言1. Docker安装JSONCrack2. 安装Cpolar内网穿透工具3. 配置JSON Crack界面公网地址4. 远程访问 JSONCrack 界面5. 固定 JSONCrack公网地址 前言 本文主要介绍如何在Linux环境使用Docker安装数据可视化工具JSONCrack&#xff0c;并结合cpolar内网穿透工具实现团队在…

【二分查找】--- 进阶题目赏析

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 算法Journey 本篇博客我们继续来了解一些有关二分查找算法的进阶题目。 &#x1f3e0; 寻找峰值 &#x1f4cc; 题目内容 162. 寻找峰值 - 力扣&#…

【python爬虫】邮政包裹物流查询2瑞数6加密

大家好呀&#xff0c;我是你们的好兄弟【星云牛马】&#xff0c;今天给大家带来的是瑞数6的补环境的总结&#xff0c;补环境肯定是需要一些基础补环境知识的&#xff0c;所以建议没有基础的小伙伴可以加入学习群进行学习&#xff0c;有基础的伙伴加入交流起来。 QQ群&#xff…

用C#写一个随机音乐播放器

form1中namespce里的代码如下 public partial class Form1 : Form {public Form1(){InitializeComponent();}private void button1_Click(object sender, EventArgs e){string folder textBox1.Text;string folderPath folder; // 指定音频文件所在的文件夹路径OpenRandomFi…

thinkphp5漏洞分析之文件包含

目录 一、环境 二、开始研究 三、漏洞分析 四、漏洞修复 五、攻击总结 一、环境 thinkphp官网下载 创建 application/index/view/index/index.html 文件&#xff0c;内容随意&#xff08;没有这个模板文件的话&#xff0c;在渲染时程序会报错&#xff09; 二、开始研究 创…

后端开发刷题 | 链表内指定区间反转【链表篇】

描述 将一个节点数为 size 链表 m 位置到 n 位置之间的区间反转&#xff0c;要求时间复杂度 O(n)O(n)&#xff0c;空间复杂度 O(1)O(1)。 例如&#xff1a; 给出的链表为 1→2→3→4→5→NULL1→2→3→4→5→NULL, m2,n4 返回 1→4→3→2→5→NULL 数据范围&#xff1a; 链表…

java使用itext 直接生成pdf

itext 使用 需求背景itext 的使用依赖简单示例基础设置&#xff08;页面大小、边距、字体等&#xff09;段落内部&#xff0c;特殊设置关键字 字体或颜色生成动态表格页脚展示页数其他设置密码添加水印&#xff08;背景图&#xff09;目录Header, Footer分割 PDF合并 PDF 需求背…

Oracle+ASM+High冗余详解及空间计算

Oracle ASM&#xff08;Automatic Storage Management&#xff09;的High冗余模式是一种提供高度数据保护的策略&#xff0c;它通过创建多个数据副本来确保数据的可用性和安全性。 以下是关于Oracle ASM High冗余的详细解释&#xff1a; 一、High冗余的特点 1.数据冗余度 在Hi…

ThreadLocal 详解

文章目录 1.什么是Thradlocal2.Thradlocal常见的API3.什么是内存溢出与内存泄漏内存溢出 (Memory Overflow)内存泄漏 (Memory Leak) 4.强 软 弱 虚引用实现区别5.Threadlocal原理分析set方法get方法 6.Threadlocal产生内存泄漏问题断点查看变化 1.什么是Thradlocal ThreadLoca…