当前位置： 首页 > news >正文

html 首行缩进2字符

news 2026/4/1 21:11:38

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>

在这里插入图片描述

相关文章：

html 首行缩进2字符

1. html 首行缩进2字符 1.1. 场景 在Html开发中让一段文字&#xff08;富文本等&#xff09;首行缩进两个文字&#xff0c;可能在前面加上8个“ ”&#xff0c;因为过去对CSS不熟悉&#xff0c;这种方法实现虽然比较直接&#xff0c;但是文字多的时候会有很多“ ”充斥在代码中…...

编程日记 2024/8/21 8:09:33

什么是IP?

目录 简介 IP IP协议 IP地址 发展历程 IP地址类型 公有地址 私有地址 IP地址编址方式 A类IP地址 B类IP地址 C类IP地址 D类IP地址 特殊的网址 子网 超网 无类间路由 IP地址的分配 IP地址管理 手工管理模式 DHCP分配IP地址的管理模式 通过交换机管理IP 地址…...

编程日记 2024/8/21 8:07:31

js拖拽交换元素位置

摘要:最近在做会议系统,9宫格小画面要支持拖拽调整顺序,需求已经实现了,简单记录下当时的逻辑处理。 /* 关于拖拽逻辑处理 start */ // 当前在拖动的下标 const curDragIndex useRef<number>(-1); /* 拖拽元素事件* onDragStart_开始* onDragend_结束 */ const handleD…...

编程日记 2024/8/21 8:05:30

在 C++ 中实现自定义容器的实用指南

在 C 中实现自定义容器的实用指南 在 C 编程中&#xff0c;容器是存储和管理数据的基本工具。标准库提供了多种容器&#xff0c;如 std::vector、std::list 和 std::map&#xff0c;但在某些情况下&#xff0c;开发者可能需要实现自定义容器以满足特定需求。本文将详细介绍如何…...

编程日记 2024/8/21 8:04:29

《深入浅出WPF》读书笔记.4名称空间详解

《深入浅出WPF》读书笔记.4名称空间详解 背景 主要讲明名称空间概念&#xff0c;可以理解为命名空间的引用。 xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml" &#x1f446;如x可以理解为一些列命名空间的引用。 不一一列举&#xff0c;只讲几个特殊的…...

编程日记 2024/8/21 8:01:25

电驱动总成

电驱动总成&#xff08;Electric Drive Assembly&#xff09;是电动汽车和混合动力汽车中关键的组成部分&#xff0c;主要负责将电能转化为机械能&#xff0c;以驱动汽车的轮胎。电驱动总成包括多个关键组件&#xff0c;通常可以分为以下几个主要部分&#xff1a; ### 主要组成…...

编程日记 2024/8/21 7:57:21

JavaScript class和正则

正则表达式练习 出生日期 年 月 日 ()表示一个整体 console.log(1909.match(^19\\d{2}$)); console.log(2024.match(^20(([01][0-9])|(2[0-4]))$)); //年 console.log(1909.match(^(19\\d{2})|(20(([01][0-9])|(2[0-4])))$)); // 月 console.log(12.match(^(0[1-9])|(1[0-2])…...

编程日记 2024/8/21 7:54:18

[Linux#42][线程] 锁的接口 | 原理 | 封装与运用 | 线程安全

互斥量 mutex • 大部分情况&#xff0c;线程使用的数据都是局部变量&#xff0c;变量的地址空间在线程栈空间 内&#xff0c;这种情况&#xff0c;变量归属单个线程&#xff0c;其他线程无法获得这种变量。 • 但有时候&#xff0c;很多变量都需要在线程间共享&#xff0c;这…...

编程日记 2024/8/21 7:52:16

奇异递归Template有啥奇的？

如果一个模版看起来很头痛&#xff0c;那么大概率这种模版是用来炫技&#xff0c;没啥用的&#xff0c;但是CRTP这个模版&#xff0c;虽然看起来头大&#xff0c;但是却经常被端上桌~ 奇异递归模板模式&#xff08;Curiously Recurring Template Pattern, CRTP&#xff09;是一…...

编程日记 2024/8/21 7:51:13

每天五分钟深度学习框架pytorch：神经网络工具箱nn的介绍

本文重点 我们前面一章学习了自动求导，这很有用，但是在实际使用中我们基本不会使用，因为这个技术过于底层，我们接下来将学习pytorch中的nn模块，它是构建于autograd之上的神经网络模块，也就是说我们使用pytorch封装好的神经网络层，它自动会具有求导的功能，也就是说这部…...

编程日记 2024/8/21 7:47:10

【办公软件】安全风险 Microsoft 已阻止宏运行，因为此文件的来源不受信任

Excel 2019版本&#xff0c;就出现安全风险 Microsoft 已阻止宏运行 因为此文件的来源不受信任的问题&#xff0c;宏直接就用不了了。 网上的解决方法&#xff0c;文件右键属性->取消安全锁。但存在没有安全锁这个选项。后查询到一个简单的解决方法。 打开Excel表格->文件…...

编程日记 2024/8/21 7:45:08

JavaScript语法基础之流程结构（顺序、选择、循环结构）

目录 1. 流程控制 1.1. 流程控制简介 1.1.1. 顺序结构 1.1.2. 选择结构 1.1.3. 循环结构 1.2. 选择结构&#xff1a;if 1.2.1. 单向选择&#xff1a;if… 1.2.2. 双向选择&#xff1a;if…else… 1.2.3. 多向选择&#xff1a;if…else_if…else… 1.3. 选择结构&#…...

编程日记 2024/8/21 7:41:04

集团数字化转型方案（四）

集团数字化转型方案通过全面部署人工智能&#xff08;AI&#xff09;、大数据分析、云计算和物联网&#xff08;IoT&#xff09;技术&#xff0c;创建了一个智能化的企业运营平台&#xff0c;涵盖从业务流程自动化、实时数据监控、精准决策支持&#xff0c;到个性化客户服务和高…...

编程日记 2024/8/21 7:40:03

【MySQL索引】索引失效场景

索引失效 1 全值匹配肯定不失效 2 最佳左前缀法则 索引文件具有 B-Tree 的最左前缀匹配特性&#xff0c;如果左边的值未确定&#xff0c;那么无法使用此索引。 3 主键插入顺序 页分裂&#xff0c;建议 让主键具有 AUTO_INCREMENT 4 计算、函数、类型转换(自动或手动)导致…...

编程日记 2024/8/21 7:38:02

基于MATLAB视觉的静态手势识别系统

一、课题介绍及思路 为了丰富手势识别方法的多样性&#xff0c;提高手势识别的正确率&#xff0c;提出了一种基于手势轮廓像素变化的手势识别方法。在Matlab环境下&#xff0c;设计并开发了一个基于视觉的静态手势识别系统。系统主要由两部分组成&#xff1a;手势分割与手势识…...

编程日记 2024/8/21 7:37:01

day02-作业题

一、简答题 请说出方法定义的全格式 访问修饰符 静态修饰符 返回值 方法名(参数列表){方法体;retrun 返回值;}请说出方法重载的概念 在一个类中&#xff0c;可以定义方法名相同&#xff0c;参数列表不相同(参数类型、参数个数或者参数顺序不同)的方法请简述什么是类&#xf…...

编程日记 2024/8/21 7:36:00

torch.cuda.set_divice()

我申请了两块GPU,然后看两张显卡的编号 import torch torch.cuda.set_device(0) # 设置当前cuda设备编号为1 print("当前cuda设备是", torch.cuda.current_device()) # 获取当前cuda设备import torch torch.cuda.set_device(1) …...

编程日记 2024/8/21 7:34:59

＜数据集＞RSOD数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;936张 标注数量(xml文件个数)&#xff1a;936 标注数量(txt文件个数)&#xff1a;936 标注类别数&#xff1a;4 标注类别名称&#xff1a;[aircraft, oiltank, overpass, playground] 序号类别名称图片数框数1air…...

编程日记 2024/8/21 7:32:57

企业高性能web服务器之Nginx

文章目录 Apache经典的web服务端Apache prefork 模型Apache work 模型&#xff08;适应市场&#xff09;Apache event 模型 网络I/O网络I/O模型I/O模型网络I/O模型 Nginx架构和安装Nginx源码编译环境准备安装nginx Nginx的平滑升级及版本回滚 Nginx架构和进程Nginx进程结构Ngin…...

编程日记 2024/8/21 7:31:56

11-sentinel利用nacos作持久化

本文介绍sentinel配置数据的持久化方法。由于sentinel官方并没有提供持久化功能&#xff0c;大家在测试过程中也能发现sentinel服务重启后&#xff0c;原来配置的数据就丢了&#xff0c;本文就是来处理这一问题的。 做好心理准备&#xff0c;我们要修改sentinel的源代码&#…...

编程日记 2024/8/21 7:30:54

源代码之下的硅基启示录——Claude Code“核泄漏”事件的深度剖析与时代回响

引言 公元2026年3月30日&#xff0c;一个看似平常的春日&#xff0c;硅基世界却迎来了一场史无前例的地震。 一家以“安全”为最高信条的AI公司&#xff0c;以一种最荒诞的方式&#xff0c;亲手打开了潘多拉的魔盒。Anthropic&#xff0c;这家估值高达3800亿美元的AI新贵&#…...

编程新知 2026/4/1 21:02:07

代码重构的艺术：在业务狂奔中如何优雅地还技术债

业务压力下的质量困局在快节奏的软件开发世界中&#xff0c;业务需求如同永不停歇的浪潮&#xff0c;推动着团队高速前行。为了抢占市场先机、快速响应变化&#xff0c;“先上线&#xff0c;再优化”几乎成了许多项目的默认模式。然而&#xff0c;这种模式背后&#xff0c;是以…...

编程新知 2026/4/1 20:42:02

3步实现AI智能背景移除：开源工具让透明GIF制作变得如此简单

3步实现AI智能背景移除&#xff1a;开源工具让透明GIF制作变得如此简单 【免费下载链接】backgroundremover Background Remover lets you Remove Background from images and video using AI with a simple command line interface that is free and open source. 项目地址:…...

编程新知 2026/4/1 20:19:44

学术场景实战：DeepSeek-OCR-2驱动深求·墨鉴实现论文公式精准提取

学术场景实战&#xff1a;DeepSeek-OCR-2驱动深求墨鉴实现论文公式精准提取 1. 引言&#xff1a;学术研究中的公式提取痛点 如果你是一名理工科的研究生、科研工作者&#xff0c;或者经常需要阅读学术论文&#xff0c;你一定遇到过这样的场景&#xff1a;在PDF论文里看到一个…...

编程新知 2026/4/1 19:11:01

大麦网自动抢票脚本：告别手速焦虑，轻松抢到心仪票务

大麦网自动抢票脚本&#xff1a;告别手速焦虑&#xff0c;轻松抢到心仪票务 【免费下载链接】Automatic_ticket_purchase 大麦网抢票脚本 项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase 还在为抢不到演唱会门票而烦恼吗&#xff1f;每次…...

编程新知 2026/4/1 19:02:58

JS 缓存函数（缓存函数计算结果、缓存异步函数的执行结果以及带过期时间）

JS 缓存函数 一、普通函数结果缓存&#xff08;同步缓存&#xff09; 实现一个通用缓存高阶函数&#xff0c;核心逻辑&#xff1a;第一次执行计算并缓存结果&#xff0c;后续相同参数直接读取缓存&#xff0c;不再重复执行。 实现代码 // 缓存高阶函数&#xff1a;接收一个函数…...

编程新知 2026/4/1 18:27:48

800元打造你的第一个自平衡机器人：Cubli Mini终极搭建指南

800元打造你的第一个自平衡机器人&#xff1a;Cubli Mini终极搭建指南 【免费下载链接】Cubli_Mini 项目地址: https://gitcode.com/gh_mirrors/cu/Cubli_Mini 想要亲手制作一个炫酷的自平衡机器人&#xff0c;但又担心成本太高、技术太难&#xff1f;Cubli Mini正是为…...

编程新知 2026/4/1 18:10:21

intv_ai_mk11应用场景：新媒体运营——热点事件评论草稿、标题党生成、互动话术

intv_ai_mk11在新媒体运营中的三大实战应用 1. 新媒体运营的痛点与AI解决方案 新媒体运营人员每天面临三大核心挑战&#xff1a;快速跟进热点事件、创作吸引眼球的标题、设计有效的互动话术。传统人工创作方式不仅耗时耗力&#xff0c;而且难以保证持续高质量输出。 intv_ai…...

编程新知 2026/4/1 16:43:04

ESP32-S3玩转微雪2.8寸触摸屏：从零到LVGL的保姆级避坑指南（ESP-IDF 5.3）

ESP32-S3与微雪2.8寸触摸屏深度适配&#xff1a;LVGL全流程实战手册 刚拿到微雪2.8寸触摸屏开发板的开发者&#xff0c;往往既兴奋又忐忑——这块搭载ESP32-S3芯片、配备8M PSRAM的硬件平台&#xff0c;理论上能流畅运行LVGL图形库&#xff0c;但实际开发中总会遇到各种"坑…...

编程新知 2026/4/1 13:04:35

WinDiskWriter：突破限制的macOS Windows启动盘制作工具

WinDiskWriter&#xff1a;突破限制的macOS Windows启动盘制作工具 【免费下载链接】windiskwriter &#x1f5a5; Windows Bootable USB creator for macOS. &#x1f6e0; Patches Windows 11 to bypass TPM and Secure Boot requirements. &#x1f47e; UEFI & Legacy …...

编程新知 2026/4/1 12:26:15