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

html 首行缩进2字符

news 2026/5/17 14:30:40

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

穿越机老鸟踩坑实录：MPU6000传感器在F4飞控上的IMU方向“玄学”配置

穿越机IMU方向配置实战&#xff1a;从MPU6000异常自旋到飞控底层校准 当你的穿越机在通电瞬间像被无形大手狠狠抽了一记耳光般疯狂自旋&#xff0c;而Betaflight地面站里陀螺仪数据却显示"一切正常"时&#xff0c;这往往意味着你正遭遇IMU方向配置的"量子纠缠态…...

编程新知 2026/5/17 10:35:00

构建本地化个人助理系统：事件驱动架构与模块化设计实践

1. 项目概述&#xff1a;一个高度可定制的个人助理系统最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Personal-Assistant”&#xff0c;作者是idk-man69。光看名字&#xff0c;你可能会觉得这又是一个类似Siri或Google Assistant的语音助手&#xff0c;但点进去仔细研…...

编程新知 2026/5/17 10:03:31

DeepSeek LeetCode 2421. 好路径的数目 Python3实现

给你 Python3 版本的代码&#xff0c;思路和之前的 Java 实现一致&#xff1a; 完整代码 python class Solution: def numberOfGoodPaths(self, vals: List[int], edges: List[List[int]]) -> int: n len(vals) # 1. 构建邻接表 gr…...

编程新知 2026/5/17 7:40:09

从开源AI导师项目GURU-Ai拆解：如何构建具备教学能力的智能体

1. 项目概述&#xff1a;一个“AI导师”的诞生与定位最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Guru322/GURU-Ai”。光看名字&#xff0c;你可能会觉得这又是一个平平无奇的AI工具仓库。但点进去细看&#xff0c;你会发现它的野心不小——它想做的不是又一个聊天机…...

编程新知 2026/5/17 7:29:45

手机号归属地查询系统：3步构建可视化定位工具

手机号归属地查询系统&#xff1a;3步构建可视化定位工具 【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https://gitcode.com/gh_mirrors/lo/l…...

编程新知 2026/5/17 7:25:36

未来之窗昭和仙君(九十四)用户指引自助教学源码—东方仙盟

软件教学引导功能说明书未来之窗昭和仙君 - cyberwin_fairyalliance_webquery一、功能概述软件教学引导功能主要用于为用户提供软件操作的引导&#xff0c;通过一系列步骤逐步引导用户完成软件的重要操作。该功能会创建遮罩层、高亮框和提示框&#xff0c;引导用户点击特定元素…...

编程新知 2026/5/17 5:11:10

保姆级教程：用STM8S207R6和FD6288T自制BLDC驱动板，从原理图到代码框架搭建

从零构建BLDC驱动板&#xff1a;STM8S207R6与FD6288T实战指南 在创客和嵌入式开发领域&#xff0c;无刷直流电机(BLDC)控制一直是兼具挑战性和实用性的热门方向。与有刷电机相比&#xff0c;BLDC电机具有高效率、长寿命和低噪音等优势&#xff0c;但驱动电路和控制系统也更为复…...

编程新知 2026/5/17 3:00:20

绿色AI能耗优化：从模型架构到MLOps实践

1. 绿色AI能耗研究的现实意义在深度学习模型参数量呈指数级增长的今天&#xff0c;AI系统的能源消耗已成为不可忽视的环境负担。根据最新研究&#xff0c;训练一个大型语言模型的碳排放量相当于五辆汽车整个生命周期的排放总量。这种惊人的能源消耗与全球减碳目标形成了尖锐矛盾…...

编程新知 2026/5/17 1:09:11

避坑指南：在Python 3.7环境用ModelScope部署speech_campplus_sv_zh-cn_16k-common语音识别模型的完整流程

避坑指南&#xff1a;Python 3.7环境部署ModelScope语音识别模型的完整实践 在人工智能语音处理领域&#xff0c;说话人验证技术正逐渐成为身份认证和语音交互系统的核心组件。阿里云达摩院开源的speech_campplus_sv_zh-cn_16k-common模型作为轻量级解决方案&#xff0c;特别适…...

编程新知 2026/5/17 0:43:29

不止于统计：用ArcGIS Model Builder自动化你的土地利用转移矩阵（附模型下载与修改教程）

从手动到智能&#xff1a;ArcGIS Model Builder在土地利用分析中的高阶自动化实践 当规划师面对十年间的土地利用变化数据时&#xff0c;传统的手工操作流程往往成为效率瓶颈。每增加一个研究时段&#xff0c;就需要重复执行数据融合、空间相交、表格导出和矩阵制作等标准化操作…...

编程新知 2026/5/16 23:41:07