html 首行缩进2字符

server/2024/9/23 5:58:03/

html_2_0">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.ppmy.cn/server/105090.html

相关文章

MongoDB如何实现大于小于查询

MongoDB是一个高性能、开源、无模式的文档型数据库&#xff0c;它使用BSON&#xff08;Binary JSON&#xff09;作为存储格式&#xff0c;支持丰富的查询语法&#xff0c;包括大于&#xff08; g t &#xff09;、小于&#xff08; gt&#xff09;、小于&#xff08; gt&#x…

webrtc ns 降噪之粉红噪声参数推导

webrtc中降噪中&#xff0c;前50帧需要进行简单噪声估计&#xff0c;使用白噪声和粉红噪声模型估算。 首先我们 复习 有色噪声&#xff08;包含白噪声&#xff09;的一般模型&#xff1a; S(f) 是频率 f 处的功率谱密度。f是频率。α 是一个频谱指数&#xff0c;通常在1左右。…

IOS 13 网络请求和Moya框架

允许HTTP请求 从iOS9开始&#xff0c;推荐使用HTTPS&#xff0c;如果使用的HTTP&#xff0c;默认情况下会出现如下错误&#xff1a; The resource could not be loaded because the App Transport Security policy requires the use of a secure connection. 这是因为iOS9引…

Python WebSocket自动化测试:构建高效接口测试框架

为了更高效地进行WebSocket接口的自动化测试&#xff0c;我们可以搭建一个专门的测试框架。本文将介绍如何使用Python构建一个高效的WebSocket接口测试框架&#xff0c;并重点关注以下四个方面的内容&#xff1a;运行测试文件封装、报告和日志的封装、数据驱动测试以及测试用例…

linux文件——用户缓冲区——概念深度探索、IO模拟实现

前言&#xff1a;本篇文章主要讲解文件缓冲区。 讲解的方式是通过抛出问题&#xff0c; 然后通过分析问题&#xff0c; 将缓冲区的概念与原理一步一步地讲解。同时&#xff0c; 本节内容在最后一部分还会带友友们模拟实现一下c语言的printf&#xff0c; fprintf接口&#xff0c…

2024河南省萌新联赛第(六)场 郑州大学

文章目录 2024河南省萌新联赛第&#xff08;六&#xff09;场 郑州大学A.装备二选一&#xff08;一&#xff09;题意&#xff1a;思路&#xff1a;AC代码&#xff1a; B.百变吗喽题意&#xff1a;思路&#xff1a;AC代码&#xff1a; C.16进制世界题意&#xff1a;思路&#xf…

牛客C++核心面试题总结

前言 总结了C核心面试题&#xff0c;一共80道&#xff0c;供大家学习。 下载链接:https://github.com/mco0308/-C- 以下是目录&#xff1a; # 目录## 一、链表1. 反转链表 ..................................................... 1 2. 链表内指定区间反转 ...............…

深入解析:Objective-C中的NSDistributedNotificationCenter分布式通知机制

标题&#xff1a;深入解析&#xff1a;Objective-C中的NSDistributedNotificationCenter分布式通知机制 在Objective-C的世界中&#xff0c;NSDistributedNotificationCenter是一个强大的工具&#xff0c;它允许应用程序在不同的进程之间发送和接收通知。这种分布式通知机制对…