html 首行缩进2字符

news2024/11/16 21:36: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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

openGauss 6.0安装过程解除对root用户依赖之gs_preinstall

目录 1.执行前提条件 1.1设置OS参数&#xff1a; 1.2定时任务权限 1.3 修改最大文件描述符 2.切换至omm用户&#xff0c;执行preinstall 3.source环境变量 4.执行gs_install 在给客户部署业务系统时&#xff0c;由于openGauss数据库的预安装过程需要用到root用户执行&am…

SD3+ComfyUI文生图生成指南

随着人工智能技术的飞速发展&#xff0c;文生图技术已经越来越成熟。SD3&#xff08;Stable Diffusion 3 Medium&#xff09;模型以其20亿参数的庞大容量&#xff0c;提供了高质量的图像生成能力。结合ComfyUI这一灵活的节点式操作界面&#xff0c;用户可以更加高效地进行创作。…

企业电脑防泄密用什么加密软件?10款2024年企业文件加密软件推荐

在当今信息化时代&#xff0c;企业数据安全已成为重中之重。文件加密软件能够有效保护敏感信息&#xff0c;防止数据泄露和未经授权的访问。本文将为您推荐十款优秀的企业文件加密软件&#xff0c;帮助企业提高信息安全性。 1.安秉网盾加密软件 安秉网盾加密软件是一款新一代…

虚拟机Linux的坑 | VMware无法从主机向虚拟机 跨系统复制粘贴拖动 文件/文本

这个情况下&#xff0c;还是没办法跨系统拖拽文件 解决办法&#xff1a; 在终端中输入命令 sudo apt-get autoremove open-vm-tools sudo apt-get install open-vm-tools sudo apt-get install open-vm-tools-desktop过程中只要需要选择是否覆盖的地方&#xff0c;都输入&…

8款StableDiffusion插件助你一臂之力

前言 在AI绘画领域&#xff0c;Stable Diffusion&#xff08;SD&#xff09;绝对是设计师和艺术家们最爱用的工具之一。它给设计师们带来了无限的创作灵感&#xff0c;不管是数字艺术、概念设计还是角色建模&#xff0c;都能让设计师们受益匪浅&#xff0c;大大提高他们的出图…

设计开发一个data-table

前言 在日常开发中&#xff0c;数据表格扮演着至关重要的角色。它以结构化的形式展现信息&#xff0c;使数据清晰易懂&#xff0c;开发者基于此类表格可以对其进行拓展和复用&#xff0c;本篇文章我们将循序渐进地介绍如何构建一个功能完善、易于使用的表格组件&#xff0c;并…

Coze插件发布!PDF转Markdown功能便捷集成,打造你的专属智能体

近日&#xff0c;TextIn开发的PDF转Markdown插件正式上架Coze。 在扣子搜索“pdf转markdown”&#xff0c;或在Coze搜索“pdf2markdown” 即可找到插件&#xff0c;在你的专属智能体中便捷使用文档解析功能。 如果想测试解析插件在你需要的场景下表现如何&#xff0c;可以直接…

数据链路层 I(组帧、差错控制)【★★★★★】

&#xff08;★★&#xff09;代表非常重要的知识点&#xff0c;&#xff08;★&#xff09;代表重要的知识点。 为了把主要精力放在点对点信道的数据链路层协议上&#xff0c;可以采用下图&#xff08;a&#xff09;所示的三层模型。在这种三层模型中&#xff0c;不管在哪一段…

09.直线图

9. 直线图 9.1 普通直线图 self.add_heading("直线图", level1)self.add_heading("普通直线图", level2)# 数据源data [10, 20]data2 [40, 60]data3 [80,90]self.add_quick_chart(data[[2018,2024],data, data2, data3],series[pool1使用情况(TiB),poo…

大数据学习-Spark基础入门

一、Spark是什么&#xff1f; Stack Overflow的数据可以看出&#xff0c;2015年开始Spark每月的问题提交数量已经超越Hadoop&#xff0c;而2018年Spark Python版本的API PySpark每月的问题提交数量也已超过Hadoop。2019年排名Spark第一&#xff0c;PySpark第二&#xff1b;而十…

【三维目标检测模型】ImVoxelNet

【版权声明】本文为博主原创文章&#xff0c;未经博主允许严禁转载&#xff0c;我们会定期进行侵权检索。 参考书籍&#xff1a;《人工智能点云处理及深度学习算法》 ImVoxelNet是一种基于RGB图像的三维目标检测模型&#xff0c;发表在WACV 2022 《ImVoxelNet: Image to Vo…

记事本/软件商店/xbox打不开(不会丢失数据)(保姆级教程)

软件商店的安装 &#xff1a; 在某些情况下&#xff0c;系统更新可能导致本地账户和微软账户出现问题&#xff0c; 使得更新似乎只影响到了一个账户&#xff0c;而非我当前使用的账户。 这会导致我环境中的某些Windows自带应用&#xff0c;如微软商店、电影与电视、画图、记事…

鸿蒙开发入门day10-组件导航

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;还请三连支持一波哇ヾ(&#xff20;^∇^&#xff20;)ノ&#xff09; 目录 组件导航 (Navigation) 设置页面显示模式 设置标题栏模式 设置菜…

论文降重切勿“本末倒置”!一文教你如何有效降重

【SciencePub学术】本期热点 论文降重 原创性是评价论文质量的重要标准之一。许多读者在撰写论文都担心重复率过高的问题。 本篇文章旨在分享有效降低学术论文重复率的策略&#xff0c;从而促进学术诚信&#xff0c;提高研究工作的创新性和学术价值。通过一系列实用的写作技巧…

高可用集群keepalived 原理+实战

keepalived 1.高可用集群1.1简介1.2原理1.3 集群类型1.4实现高可用1.5VRRP&#xff1a;Virtual Router Redundancy Protocol1.5.1 VRRP 相关术语1.5.2VRRP 相关技术 2.实验2.1keepalived环境部署2.2抢占模式和非抢占模式2.2.1非抢占模式2.2.2抢占延迟模式 preempt_delay 2.3VIP…

MATLAB 手动实现投影密度法分割建筑物立面 (73)

专栏文章往期回顾,包含本文章 MATLAB 手动实现投影密度法分割建筑物立面 (73) 一、算法介绍二、算法实现1.代码2.效果总结一、算法介绍 从原始点云中,自动分割提取建筑物立面点云用于立面绘图,可以减少人为操作流程。这里从0开始,手动实现一种基于投影密度法的建筑物立…

Unity动画模块 之 3D模型导入基础设置Animation页签

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 基础设置就截图看看辣&#xff0c;只有实际应用中才会使用到&#xff0c;现在死记硬背也不可能记住 1.基础设置 笔记来…

STM32常用C语言知识总结

目录 一、引言 二、C 语言基础 1.数据类型 2.变量与常量 3.控制结构 4.数组与指针 5.字符串 6. extern变量声明 7.内存管理 三、STM32 中的 C 语言特性 1.位操作 2.寄存器操作 一、引言 STM32 作为一款广泛应用的微控制器&#xff0c;其开发离不开 C 语言的支持。C …

编写日志文件

精灵程序 #include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/wait.h> #include <stdlib.h> #include <string.h> #include <errno.h> #include <fcntl.h> #include <sys/stat.h> #include…

vue3 响应式 API:ref() 和 reactive()

在 Vue 3 中&#xff0c;响应式系统是其核心特性之一&#xff0c;它使得数据的变化能够自动触发视图的更新。 官方文档&#xff1a; 响应式 API&#xff1a;核心 要更好地了解响应式 API&#xff0c;推荐阅读官方指南中的章节&#xff1a; 响应式基础 (with the API preference…